CODEWITHSUNDEEP
cssmaterialize
imbond
imbond

Reputation: 2098

How to hide Div tags according to device size changes in Materializecss?

When it comes to the desktop view, the interface should be of 3 column. But when it comes to the mobile view (360 x 640) or (360 x 480), I don't want to display the first column, only two columns should be displayed. For reference, here I've mentioned three columns.

<div class="col s12 m2 l2">...</div>
<div class="col s12 m8 l8">...</div>
<div class="col s12 m2 l2">...</div>

Upvotes: 0

Views: 1393

Answers (2)

imbond
imbond

Reputation: 2098

@media indirectly helped me and let me tell you how. As the details mentioned in the above answer, I searched @media in the existing CSS. I found the properties like hide-on-small-and-down, hide-on-med-and-down and so on. I applied those on div classes and it worked like a charm.

Upvotes: 2

Alex Cushing
Alex Cushing

Reputation: 286

you can redefine css properties under:

@media only screen and (max-width: 640px) {

}

for instance:

.btn{
     display: none;
}

    @media only screen and (max-width: 640px) {
    .btn {
        display: inline;
    }

}

Upvotes: 1

Related Questions