Responsive Design - Eliminating Website Components

[WebWerx 0]

I understand the usefulness of responsive design. That being said, if I am to use responsive design on our website, there are certain elements that I would to not appear on cellphones (for example). Case in point, on the top right of our website, we have a Canadian flag... What use is that on a mobile site? None. So do I tell my CSS to not display the flag on screens of a certain size? I am looking to do this with many website elements. For example, I do not want our sidebar widgets to appear on mobile phones.... etc....

[beardedavenger 158]

Try a media query. The stuff you want to hide, for example .flag, will go inside the media query. So below, would hide elements with the maximum viewport is 479px. That's iphone landscape and under. [code]@media (max-width:479px) { .flag {display:none;} }[/code] Nick

[WebWerx 0]

Hey Nick (@beardedavenger) - I get it. This actually pretty cool. So I'll just add all of the elements I want to "omit" after a certain screen size. Sounds easy enough. In terms of workflow, I plan on fixing the other stuff you coached me on first.. Then work on elements such as .flag I really appreciate your help - very much. L

[creatov 0]

Thanks, very useful explanation! I use this one for hiding the sidebar completely on smaller screens.