Media query problem

[johned]

I am designing a page which has a slightly different design for screen sizes 768px and up. So I have done “display: none;” to hide all the larger screen info for the smaller screens for each media query which has worked. The problem is when I get to the 768px width (line 338 on my CSS). If I do “display none” on this media query for the parts that I only want on smaller screens is also removes it from my smaller screens which it should not do. Where am I going wrong? I have also tries doing “min-width” for the screen size 768px but when I do that it just shows all the parts I only want on the larger screens on the smaller screens. I have attached my HTML and CSS code http://codepen.io/Johned22/pen/vKzAyd
Thanks

[Shikkediel]

Without looking at the pen further (too much code for myself there), I’d say to just define a display: block for the smaller screen sizes. I’m assuming the issue arises when you’re resizing back and forth, it’ll stick with the style that hides the elements unless that is overwritten.

[johned]

Thanks for your feedback.
When you say to define a display block for the smaller pages do you mean something like this-
@media screen and (max-width: 700px) {
body {
display: block;
}

I tried this for the 700px screen and I am still having the same problem. When I delete one of the parts that should only be for the smaller screens in the 768px media query this part is also removed from the smaller screens

[I.m.learning]

In your pen I don’t see your media querie. But one thing you can do is just create a separate style sheet for each breakpoint. Test the mobile style to make sure it works by itself. If you haven’t tried it yet

[Author]

Posts