Get a free trial // Grow your CSS skills // Land your dream job

Help with mobile-first CSS

  • # January 31, 2013 at 7:56 pm

    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?

    # January 31, 2013 at 8:10 pm

    @Yonikenneth Well, when I’m using media queries with my websites, I use this article: It helps a lot. Worth a look!

    Just use those breakpoints and style accordingly!

    # January 31, 2013 at 8:24 pm

    @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?

    # January 31, 2013 at 8:27 pm

    Width: auto

    # January 31, 2013 at 8:37 pm

    @ChrisP Thanks, so would that be the solution you would recommend?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed