Help with rendering the header at tablet size

Hi @Beyondspace, @tuanphan, and @paul2009,

Wondering if you legends could help me out.

I've spent the whole morning trying to resolve this issue, but I'm stumped.

I'm happy with how the mobile header looks up to 768px. 

I'm happy with how the desktop nav menu looks after 799px.

However, between 768px and 799px, you will notice that the mobile header has a padding of around 6vw around it, but the rest of the content on the page only has a padding of around 3vw around it. This makes it look very awkward because the logo looks like it's too far to the right and the hamburger is too far to the left. (See screenshot below.)

I am desperately trying to align the mobile header with the rest of the content for screens/browsers between 768px and 799px.

I have tried the below code, which I reckon should theoretically work, but for some reason, it doesn't.

@media only screen and (max-width: 798px) and (min-width: 768px) {
.header .header-announcement-bar-wrapper {
padding: 3vw !important;
}
}

If either of you can shed any light on this issue, I'd be so grateful!

Strangely enough, when I am logged in and in the editing mode, the preview does render properly. But not once I am logged out. 

Screenshot attached below.

I also tried this but it didn't work either.

@media only screen and (max-width: 798px) and (min-width: 768px) {
.header .header-announcement-bar-wrapper {
padding: 3vw !important;
padding-left: 3vw !important;
padding-right: 3vw !important;
}
}

@creedon Any chance you might be shed some light onto this for me too? 

1 hour ago, creedon said:

I do! The issue is a non-printing character has gotten into the mix and causes the ruleset to fail. If you look at the ruleset you will notice two characters between the selector and the right curly bracket ( { ).

Select the two characters and type the space character. Or, you can use the following.

@media screen and ( min-width : 768px ) and ( max-width : 799px ) {
    
  .header .header-announcement-bar-wrapper {
  
    padding : 3vw;
    
    }
    
  }

Also note I change the 798 to 799.

Let us know how it goes.

You are a legend! Thank you so much. I appreciate you taking the time to help. 

I still don't completely understand which non-printing character caused it to fail? I've attached a screenshot of the code. Could you point out where the error is so I know for the future?

Thank you again!

1 hour ago, rhondahymason said:

I still don't completely understand which non-printing character caused it to fail?

I didn't check the actual character code so I can't tell you which one it was. The thing about non-printing characters is that you can't easily see them because they don't show normally. I was able to find it because I have a code editor that shows invisible (non-printing) characters. The feature turns them into little circles so you can see that they are there.

In my experience this happens sometimes when copying code from web pages like this forum.

12 minutes ago, creedon said:

I didn't check the actual character code so I can't tell you which one it was. The thing about non-printing characters is that you can't easily see them because they don't show normally. I was able to find it because I have a code editor that shows invisible (non-printing) characters. The feature turns them into little circles so you can see that they are there.

In my experience this happens sometimes when copying code from web pages like this forum.

Thank you! That makes sense. Is there a simple code editor that you can recommend that I use for future troubleshooting?

14 minutes ago, rhondahymason said:

Is there a simple code editor that you can recommend that I use for future troubleshooting?

On macOS yes. For Windows I don't have a clue which one has a show invisible feature.

I like BBEdit. I find it pretty easy to use but I wouldn't call the app simple. It's kind of like the gold standard or grand daddy of code editors on macOS, been around for ages. It's not free but has a 30 day full featured trial period. You can get it through the App Store or from the BBEdit site.