CODEWITHSUNDEEP
csstwitter-bootstrap
Torben
Torben

Reputation: 5494

Bootstrap - Remove box-shadow on mobile devices

i created a webpage with bootstrap. I have a .corset inside the .container class. The .corset has the following spec:

.corset {
  -webkit-box-shadow: 3px 3px 5px 3px rgba(186,186,186,1);
  -moz-box-shadow: 3px 3px 5px 3px rgba(186,186,186,1);
  box-shadow: 3px 3px 5px 3px rgba(186,186,186,1);
}

I want to achieve that the box-shadow is set to none on mobile devices. I know that there are helper classes like .hidden-xs or .visible-*-* but i do not want to hide the .corset, i just want to edit its specs on mobiles. Is there a helper available?

Thanks!

Upvotes: 1

Views: 3747

Answers (2)

cor
cor

Reputation: 3393

Use media queries for this. Bootstrap has great support for that as well.

For example, in your case would be something like that:

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    .corset {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
}

Upvotes: 6

John Doeff
John Doeff

Reputation: 309

Solution 1
Using @media queries: specific rules for small screen


    @media only screen {
        /*small screen css*/
    }
    @media only screen and (min-width: 950px) {
        /*desktop css*/
    }

But you cant truly detect mobiles without user-agents sniffing via javascript. http://detectmobilebrowsers.com/
is an example. Then add a .mobile class to the html element, and then define a .mobile .corset{} rule

Upvotes: -2

Related Questions