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: 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!

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

*May or may not contain any actual "CSS" or "Tricks".