Resizing promo block in Mobile View

[riswan]

Hi everyone,

In my website desktop view the promo block looks fine. But in mobile view the promo block is not mobile view compatible it is still large in size so the text gets wrapped awkwardly.

Is there a way to resize how the promo blocks looks, only in mobile view without affecting desktop view settings?

(Screenshot of mobile view attached)

Thanks.

[Basara]

Hello.
You can do this with css media query https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[riswan]

I tried to edit the promo block in the blocks section. It has the below html codes. Will any change in the below code correct the issue in mobile view?

<section class="row promo_section">
   <div class="col-md-3 col-xs-6 promo_block">
      <div class="promo_icon"><i class="fa fa-truck fa-fw"></i></div>
      <div class="promo_text">
         <h2>
            <b>Free<br/>Delivery</h2>
      </div>
   </div>
   <div class="col-md-3 col-xs-6 promo_block">
      <div class="promo_icon"><i class="fa fa-rupee fa-fw"></i></div>
      <div class="promo_text">
         <h2>
            <b>Cash on<br/>Delivery</h2>
</div>
   </div>
   <div class="col-md-3 col-xs-6 promo_block">
      <div class="promo_icon"><i class="fa fa-whatsapp fa-fw"></i></div>
      <div class="promo_text">
         <h2>
            <b>Order on WhatsApp</h2>
         </div>
   </div>
   <div class="col-md-3 col-xs-6 promo_block">
      <div class="promo_icon"><i class="fa fa-refresh fa-fw"></i></div>
      <div class="promo_text">
         <h2>
            <b>Easy Return <br/>&amp; Refund</h2>
         </div>
   </div>
   </section>

[riswan]

Solved.  I edited the style.css file with the media query and tweaked the font size and padding size.

@media only screen and (max-width: 600px) {
   
    .promo_section {
   padding: 10px 0 25px 0;
   border: 1px solid #d7d8da;
   margin: 0 auto 10px auto;
   width: auto;
   color: #4b5b58;
}
.promo_block {
    overflow: hidden;
}
.promo_block .promo_icon {
    float: left;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    font-size: 45px;
    padding: 18px 5px 0 0;
}
.promo_block .promo_text {
   
}
  }