• 0
Sign in to follow this  
Followers 0

Responsive Design - Eliminating Website Components

Question

Posted · Report post

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....

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0