[SolvedMedia queries css .nav for portrait phone not showing

[jasnick]

Using CMSMS 1.11.10 and latest modules

Test site: westwebtest.com/avalon

This is only a problem on the Home page. Other pages work as intended.

All pages have a Show Menu/Hide Menu navigation that is only seen on smaller devices.
Under width 800px the nav area contains "Show Menu". Over 800px width, the full horizontal menu is shown.
On the Home page, at small widths, nothing is shown in the nav area at all. Testing on my HTC and in Resizer, Responsinator and even Web Developer Toolbar/View Responsive layouts, nothing shows until 568px wide, then "Show Menu" is seen.

If I start off with any other page, the "Show Menu" is there when it should be, regardless of the smaller size.
The only difference in Home page template and the template for all other pages is that the home page has an image under the nav. It makes no difference if I remove it. Also the home page has only #main div (1 col) while the others have a #left and a #right as well (3 col) though I can't see that anything that comes after the .nav should matter.

The media queries css for the nav is the same as I have used in many sites with no problems.

Thanks

[velden]

Seems to work for me:

[jasnick]

What are you viewing it on? What is the width of the device?

Thanks

[velden]

Sorry, didn't read well.

Css below makes the menu hidden:

Code: Select all

@media screen and (max-width: 480px) {

...

body.home #barit {
    display: none;
}

...

body.home h3.barit {
    display: none;  
}

[jasnick]

Hi velden

Perhaps I didn't explain it very well - on small screens I want it to display "Show Menu" and on the Home page it doesn't! Under 568px wide, it should have "Show Menu" under the header on the main home page.

On any of the other pages, it does show as intended, just not on the home page.

[velden]

Hi velden

Perhaps I didn't explain it very well - on small screens I want it to display "Show Menu" and on the Home page it doesn't! Under 568px wide, it should have "Show Menu" under the header on the main home page.

On any of the other pages, it does show as intended, just not on the home page.

Because you have some css rules explicitly telling it to hide that div on page with alias=home ( </__body class="home".. ) for devices where '@media screen and (max-width: 480px)'

[jasnick]

Hi velden

No, I don't have anything in the media queries for max-width 480px with body.home except for body.home #footer.

This exact same code (plus .nav) works on several other sites:
.bar {
display: none;
margin: 0;
}
#barit {
display: block;
}

h3.barit {
clear: both;
margin: 0;
padding: 6px 0;
background-color: #fff;
text-align: center;
cursor: pointer;
color: #019fc4;
}

However for max-width 480px I removed .bar and this did the trick . So why it still works on other sites with .bar {display:none} I will never know.

Thanks!

[Dr.CSS]

That CSS you pasted is called twice in the same @media call and once you call it for one size you don't need to call it again for sizes below that, so @media 600px calls don't need to be called for @media 400px etc...

Once called no need to call it again unless you need to make changes to the CSS again...

[jasnick]

Thanks Dr.CSS - yes, I see now! Thanks!

[Dr.CSS]

I keep all my @media queries in the last style sheet attached to the template, it looks like you may have duplicates, maybe you were working with it and copy/pasted a combined set into the normal ones...

I like to use nocombine='1' when in production mode then remove that when going live...

[jasnick]

Thanks Dr.CSS - I try to stick to one stylesheet only (except for those attached to forms, albums etc) and I find when something is not working as it should I do tend to add things willy-nilly in an effort to solve the problem and things get kind of messy after a while

I see that my original max-width 600 was practically a copy of max-width 400 so yes, I see your point.

What is nocombine? I've never heard of that.

Thanks

[velden]

What is nocombine? I've never heard of that.

http://docs.cmsmadesimple.org/tags/core/cms_stylesheet

[jasnick]

Thanks velden