Jump to content
Sign in to follow this  
WebWerx

Responsive Design - Eliminating Website Components

Recommended Posts

WebWerx    0
WebWerx

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
beardedavenger    158
beardedavenger
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

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx
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
creatov    0
creatov
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  

×