CODEWITHSUNDEEP
twitter-bootstrap-3
user3269608
user3269608

Reputation: 11

change css property on smaller device

simple question.

I'd like to set the css property of a class, say the container's padding-top, to different values depending if I am on a xs device or on a sm device.

Any suggestions?

Sorry for the basic question.

Upvotes: 0

Views: 374

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

You can use CSS media queries. Bootstrap includes media queries for specific device "breakpoints" (http://getbootstrap.com/css/#grid-media-queries) so you would override like this..

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        .container {
            padding-top:20px;
        }
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        .container {
            padding-top:40px;
        }
    }

Demo: http://bootply.com/NLOH2yNKnM

Upvotes: 1

Related Questions