Sense Theme - Resize banner between desktop and mobile

Store Design
,
1

Hello all,

I’m trying to improve my mobile website version and I’m trying to understand why the homepage banner on the mobile version gets cut off and not resized.

page URL is: www.haemiskin.com

desktop:

1.jpg
1.jpg1903×676 52.7 KB

mobile:

2.jpeg
2.jpeg945×2048 73.6 KB

Is there a way to improve this and make it resize to make it a good fit on mobiles?

Thanks!

2

Hi @FredyP

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.banner__media.media {
    height: 16rem !important;
}
}

Here is the result:

image_360.png
image_360.png291×360 52.4 KB

I hope this helps

Best,

Daisy

1 Like
3

Hi @FredyP

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:600px){
.banner__media.media.scroll-trigger.animate--fade-in {
    height: 17rem !important;
}
}

websensepro_0-1736426275475.png
websensepro_0-1736426275475.png276×492 59.6 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

4

Hi @FredyP

You can create separate image banners for mobile and desktop, then add those custom codes below to hide desktop banner on mobile and vice versa.

Add this code to Custom CSS of destop’s banner.

@media (max-width: 749px) {
.banner { display: none; }
}

Ad this code to Custom CSS of mobile’s banner

@media (min-width: 750px) {
.banner { display: none; }
}