Homepage Image Banner Desktop vs Mobile sizing

Amanda_Uprichar
New Member
1 0 1

Hello,

 

I have Prestige theme with customizations. My homepage banner looks big on desktop and I want it to fit to screen on Mobile. How can I adjust the mobile image banner sizing without it affecting the desktop version? In which page should edit code in for this?

 

 

dmwwebartisan
Shopify Partner
5796 1327 1699

@Amanda_Uprichar 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
LitExtension
Shopify Partner
667 67 119

Hi @Amanda_Uprichar

In this case, I suggest you should use 2 images (one for mobile and one for desktop).

- Example markup:

<div class="banner">

  <div class="banner__image banner__image--mobile">

    <a href="/collections/real" class="banner__link" title="Title">

      <figure class="banner__img"><img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-orange-and-yellow-gradie..." alt="Alt" class="image-lazy__img lazyload"></figure>

    </a>

  </div>

  <div class="banner__image banner__image--desktop ">

    <a href="/collections/real" class="banner__link" title="Title">

      <figure class="banner__img"><img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-orange-and-yellow-gradie..." alt="Alt"> </figure>

    </a>

  </div>

</div>

 

Please place this code at the end of theme.scss:

.banner__image--mobile {

@include media-query($medium-up) {

    display: none;

  }

}

.banner__image--desktop {

    display: none;

@include media-query($medium-up) {

    display: block;

  }

}

Hope this helps!

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes