The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “Example on CodePen”)

Viewing 1 post (of 1 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