- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
@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?
@ChrisP Thanks, so would that be the solution you would recommend?