Docs

[marvynro1]

Basically, I’ve noticed that whatever css styling I do, the mobile site gets the same treatment. Sounds like it would work, but once you actually look at the mobile version, things start to look out of whack. How would I go about making separate changes to the mobile version? Medium Screen version? I want my site to look good on any device. My main issue at the moment is with the navbar.

Here is my site link: http://thenakedtruthwax.com/salon-services/

Every page will have the navbar except for the home page at the moment since I haven’t launched it.

Thanks Again,
Marvyn

[marvynro1]

Also, one more thing. I added a custom button to the navbar, which looks great but at the same time it looks like the whole section isn’t lined up perfectly center (looks more like logo and nav links are more to the right) On the mobile site, the custom button looks weird and I would like it to fill the one empty slot under the collapsed burger. On the desktop screen I want the navbar to be as follows:

logo all the way to the left and site links all the way to the right

Like I said, I experimented with margin-left, padding,etc. But once I looked at the mobile version, it looked bad.

I would greatly appreciate a solution before I pull my hair out! Lol

Marvyn

[marvynro1]

This reply has been marked as private.

[Joao]

Hi There,

“Basically, I’ve noticed that whatever css styling I do, the mobile site gets the same treatment. Sounds like it would work, but once you actually look at the mobile version, things start to look out of whack. How would I go about making separate changes to the mobile version?”

What you need to do that is to wrap your codes in media queries, media queries are CSS code wraps that let you decide on which resolution under, above or in between your css code will work.

Please see more info at :

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

https://www.google.hr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=media+query+sizes

Notice that your code should be inside the media query and it will look like this for example:

@media only screen (min-width: 1024px) {
 #navbtn {
 position: absolute; 
 margin-top: -97%; 
 text-align:center;
 box-sizing: border-box;
 padding: 22px 30px;
 text-transform: uppercase;
 font-family: Raleway, sans-serif;
 font-weight: bold;
 letter-spacing: 0.2em;
 color: #fff;
 transition: background-color .5s ease-in-out, color .5s ease-in-out, text-shadow .5s ease-in-out, border-radius .5s ease-in-out;
}
#navbtn:active {0, 0, 0, 0.65);
}
#navbtn {
 border-top-width: 0px;
 border-right-width: 0px;
 border-left-width: 0px;
 border-bottom-width: 0px; 
 font-size: 16px;
 line-height: 20px;
 width: 170px;
 text-align: center;
 background: black;
 border-radius: 0px;
}
#navbtn:hover {
 background-color: rgb(255, 236, 0);
 border-radius: 100px;
 color:black;
}
}

With your #navbtn code wrapped like this, the code will just work on devices that have minimum 1024px width.

Regarding the Logo and the Navbar they look in place and they are aligned with your website width set on Customizer / Layout and Design.

I Hope this information helps, if you need more information or help with something specific please let us know.

Thanks,

Joao

[marvynro1]

Ah I see what you mean. However, I’m still having problems getting it to work. Within the media query, it doesn’t make any update to my site, no matter what I change in it, it just stays the same. Now–when I change anything outside the media query it does make the changes I expect, (for example I’ve been trying to make my custom nabber button to look good on both mobile and desktop screens). But in the end I end up with the same problem I mentioned originally. Any ideas?

[marvynro1]

Anyone?

[Rue Nel]

Hello There,

Thanks for the updates. The code changes doesn’t reflect any changes because it is overwrite. Please keep in mind that the best css practice especially with @media blocks is that you should place them at the bottom of your other styles. You can make use of this format:

element  {
  /* some styling here */
}

.my-custom-ID  {
  /* some styling here */
}

.my-custom-element  {
  /* some styling here */
}

@media(min-width: 1024px){
  .my-custom-element  {
    /* some styling here */
  }

  .my-custom-ID  {
    /* some styling here */
  }
}

@media(max-width: 979px){
  .my-custom-element  {
    /* some styling here */
  }

  .my-custom-ID  {
    /* some styling here */
  }
}

I would recommend that you edit your custom css and make it look the the above format to prevent any css styling from being overridden within your code. Hope this explains it.

[marvynro1]

Forgive me for being a little ignorant on this, but going off this format, what would be the element, custom-ID, and custom element? As of now, I’ve only been putting my #navbtn ID inside the media query, like this:

@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
#navbtn {
text-align:center;
box-sizing: border-box;
padding: 22px 30px;
text-transform: uppercase;
font-family: Raleway, sans-serif;
font-weight: bold;
letter-spacing: 0.2em;
color: #fff;
transition: background-color .5s ease-in-out, color .5s ease-in-out, text-shadow .5s ease-in-out, border-radius .5s ease-in-out;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
font-size: 16px;
line-height: 20px;
width: 170px;
text-align: center;
background: black;
border-radius: 0px;
}
#navbtn:active {(0, 0, 0, 0.65);
}
#navbtn:hover {
background-color: rgb(255, 236, 0);
border-radius: 0px;
color:black;
}
}

How could I improve on this based on the format you shared? Sorry, still trying to get a full understanding on this, although I get where this is going, but just can’t finish the sentence, so to speak. lol

[Christian]

We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts