0

My design,

enter image description here

I need mobile view like,

first block second block

third block fourth block

How to include media query?

Script :

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="row" style="margin-left: 40px;"><img src="{{media url="clock_3_.png"}}" alt=""></div>
<div class="row" style="top: 1461px; left: 181px; width: 176px; height: 23px; text-align: center; font: normal normal 600 19px/22px Laca; letter-spacing: 0px; color: #0072bc; opacity: 1;">First block</div>
<div class="row" style="top: 1494px; left: 189px; width: 160px; height: 39px; text-align: center; font: normal normal normal 14px/18px Laca; letter-spacing: 0px; color: #707070; opacity: 1;">test test test test</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="row" style="margin-left: 40px;"><img src="{{media url="Group_3461.png"}}" alt=""></div>
<div class="row" style="top: 1461px; left: 492px; width: 110px; height: 23px; text-align: center; font: normal normal 600 19px/22px Laca; letter-spacing: 0px; color: #0072bc; opacity: 1; margin: 0px 15px;"second block</div>
<div class="row" style="top: 1494px; left: 465px; width: 160px; height: 39px; text-align: center; font: normal normal normal 14px/18px Laca; letter-spacing: 0px; color: #707070; opacity: 1;">test test test test</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="row" style="top: 1394px; left: 801px; width: 40px; height: 47px; margin-left: 40px;"><img src="{{media url="money.png"}}" alt=""></div>
<div class="row" style="top: 1461px; left: 734px; width: 174px; height: 23px; text-align: center; font: normal normal 600 19px/22px Laca; letter-spacing: 0px; color: #0072bc; opacity: 1;">third block</div>
<div class="row" style="top: 1494px; left: 741px; width: 160px; height: 39px; text-align: center; font: normal normal normal 14px/18px Laca; letter-spacing: 0px; color: #707070; opacity: 1;">test test test test</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="row" style="top: 1395px; left: 1073px; width: 46px; height: 46px; opacity: 1; margin-left: 40px;"><img src="{{media url="Group_3462.png"}}" alt=""></div>
<div class="row" style="top: 1461px; left: 1039px; width: 116px; height: 23px; text-align: center; font: normal normal 600 19px/22px Laca; letter-spacing: 0px; color: #0072bc; opacity: 1; margin: 0px 10px;">fourth block</div>
<div class="row" style="top: 1494px; left: 1017px; width: 160px; height: 39px; text-align: center; font: normal normal normal 14px/18px Laca; letter-spacing: 0px; color: #707070; opacity: 1;">test test test test</div>
</div>
</div>
</div>
1
  • 4
    I’m voting to close this question because it is not related to Magento. This is a Bootstrap/general CSS question and would be better placed on Stack Overflow.
    – Ben Crook
    Dec 17 '20 at 15:13
1

Add to CSS

@media (max-width: 576px) { 
 .block-static-block:nth-child(odd) {
           //add css for left slide
    }   
 .block-static-block:nth-child(even) {
           //add css for right slide
    }
}

use this boostrap that easy use

@media (max-width: xs) { 
 .block-static-block:nth-child(odd) {
           //add css for left slide
    }   
 .block-static-block:nth-child(even) {
           //add css for right slide
    }
}
1
  • pls see my updated post, how to include media query regard my script
    – zus
    Dec 17 '20 at 7:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.