Using the Wordpress Bones starter theme, I've set up my Base CSS. Now I want to use the @media queries to style the various screen sizes (hiding elements on mobile devices ect...).
What's the best way to accomplish this? Do I set up my mobile styles first after which I make "exceptions" for the larger resolutions? Or is there a more productive way?
I would like to hear your opinions, or if I'm maybe seeing this all in the wrong way?
@srig99 Thanks for the link but I've got all the media queries set up already.
Let me give you an example of what problems I'm facing:
The main menu items in the mobile version are 100% wide. Although on the larger resolutions the same menu items should have no width defined at all (just padding), so would the following be correct?
@media only screen and (min-width: 768px){
width: auto;
}
That's basically where my question comes down to. What's the best approach on styling the different screen sizes (while the CSS I have now is applied to everything).
Put another way, how would you modify an existing website's CSS which is not responsive to mobile-first?
Hey guys,
Using the Wordpress Bones starter theme, I've set up my Base CSS. Now I want to use the @media queries to style the various screen sizes (hiding elements on mobile devices ect...).
What's the best way to accomplish this? Do I set up my mobile styles first after which I make "exceptions" for the larger resolutions? Or is there a more productive way?
I would like to hear your opinions, or if I'm maybe seeing this all in the wrong way?
@Yonikenneth Well, when I'm using media queries with my websites, I use this article: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/. It helps a lot. Worth a look!
Just use those breakpoints and style accordingly!
@srig99 Thanks for the link but I've got all the media queries set up already.
Let me give you an example of what problems I'm facing:
The main menu items in the mobile version are 100% wide. Although on the larger resolutions the same menu items should have no width defined at all (just padding), so would the following be correct?
That's basically where my question comes down to. What's the best approach on styling the different screen sizes (while the CSS I have now is applied to everything).
Put another way, how would you modify an existing website's CSS which is not responsive to mobile-first?
Width: auto
@ChrisP Thanks, so would that be the solution you would recommend?