AbanteCart Community

Shopping Cart Operations => Support => Topic started by: riswan on October 10, 2019, 04:57:15 AM

Title: Resizing promo block in Mobile View
Post by: riswan on October 10, 2019, 04:57:15 AM

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.

Title: Re: Resizing promo block in Mobile View
Post by: Basara on October 10, 2019, 05:29:06 AM

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

Title: Re: Resizing promo block in Mobile View
Post by: riswan on October 10, 2019, 09:52:10 AM

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>

Title: Re: Resizing promo block in Mobile View
Post by: riswan on October 10, 2019, 03:40:01 PM

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 {
   
}
  }