The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with mobile-first CSS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #42388

    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?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.