Sense Theme - Resize banner between desktop and mobile

[FredyP]

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:

mobile:

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

Thanks!

[DaisyVo]

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: 

I hope this helps

Best,

Daisy

[websensepro]

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

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

[Dan-From-Ryviu]

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