How can I set different style for some element on small screen when one block move under another? For example: make first block red.
<style type="text/css">
#block1 {
background: skyblue;
}
#block2 {
background: yellow;
}
/*
#block1 on small screen {
background: red;
}
*/
</style>
<div class="uk-grid">
<div id="block1" class="uk-width-small-2-3">
BLOCK 1
</div>
<div id="block2" class="uk-width-small-1-3">
BLOCK 2
</div>
</div>
Could this help?
#block1 {
background: skyblue;
}
#block2 {
background: yellow;
}
@media screen and (max-width: 480px) {
#block1 {
background: red;
}
}