CODEWITHSUNDEEP
htmlcss
Dano007
Dano007

Reputation: 1932

Media query not confined to just tablet and smaller screen sizes

I believe I have formatted my media query incorrectly as it is not only working for the devices I wish to target (Small laptop screen and tablets) but is also being applied to my desktop screen size.

Do I need the extra set of {} being used here?

/* Medium devices (landscape tablets, 992px and up) */
@media only screen and (min-width: 992px) {
.wpb_text_column.wpb_content_element.vc_custom_1565090087252.DANSpace {
    padding-bottom: 220px !important;
}

}

Upvotes: 0

Views: 48

Answers (1)

jakelovelock
jakelovelock

Reputation: 485

The problem is that you've set a minimum width but not a maximum width. This means that whatever is inside the mobile query will be applied whenever the users width is above 992px.

To target everything below that you would need to change it to max-width like so:

@media only screen and (max-width: 992px) {
.wpb_text_column.wpb_content_element.vc_custom_1565090087252.DANSpace {
    padding-bottom: 220px !important;
}

}

You can also target between certain widths by doing the following:

@media (min-width: 576px) and (max-width: 992px)

Upvotes: 2

Related Questions