CODEWITHSUNDEEP
javascriptcss
user1031947
user1031947

Reputation: 6664

CSS only way of defining rule that is only applied on elements of a certain width?

Currently I listen to the resize event using javascript and apply a css class to my layout depending on how wide it is.

eg: <800px --> <div class="layout" />
    >800px --> <div class="layout wide" />

This works, but feels clunky.

I am wondering if there is a css-only way of defining rules that are only applied if an element is a certain width / size?

Upvotes: 1

Views: 84

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

This is what media queries are for, however they apply to the viewport as a whole rather than individual elements. So you might have this:

.layout {
    /* styles for wide layout */
}
@media all and (max-width:800px) {
    .layout {
        /* styles for narrow layout */
    }
}

Upvotes: 2

Related Questions