html - CSS display block and hide another on low resolution -
i'm trying hide navigation bar , display thing in place when resolution low , small screens (mobile)
i did manage hide navigation bar the other thing won't display.
@media screen , (max-device-width: 500px) { .small-menu { display: block; } .regular-menu { display: none; } } @media screen , (max-width: 1279px) { .small-menu { display: block; } .regular-menu { display: none; } } .small-menu { display: none; } .regular-menu { display: block; }
write css seqvence
- write hole page
css - write
cssmax-width1279 - write
cssmax-device-width500
.small-menu { display: none; } .regular-menu { display: block; } @media screen , (max-width: 1279px) { .small-menu { display: block; } .regular-menu { display: none; } } @media screen , (max-device-width: 500px) { .small-menu { display: block; } .regular-menu { display: none; } } <div class="samll-menu">this small menu</div> <div class="regular-menu">this regular-menu</div>
Comments
Post a Comment