Grow your CSS skills. Land your dream job.

Mobile first and overriding inline style on small screens

  • # December 28, 2012 at 10:07 am

    My approach on a site I’m currently working is to use min-width media queries to build up the page as the screen gets bigger. Background images of components are content managed so they are set using inline styles. However the designs dictate that the background images don’t appear on small screens.

    I’m aware that background-image: none !important; will override inline styles for the mobile version but how do I effectively override this !important declared later in the stylesheet?

    One approach since it’s a no-repeat background is to position the background -10000px or something but the mobile users will still download this resource unfortunately so I’m hoping there are better suggestions. Cheers.

    [CodePen](http://codepen.io/duncanmcdougall/pen/GAuzb “Example on CodePen”)

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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