Jump to content


Photo
- - - - -

Responsive Design - Eliminating Website Components


  • Please log in to reply
3 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 08 July 2012 - 08:40 PM

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

#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 09 July 2012 - 12:33 AM

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.

Please Login or Register to see this Hidden Content


Nick

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 09 July 2012 - 04:10 PM

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

#4 creatov

creatov

    Advanced Member

  • Members

  • 56 posts
  • Framework Version:Developer Edition

Posted 16 July 2012 - 01:00 PM

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