MOBILE AND DESKTOP BANNER DIMENSIONS

[manekakknowle]

Hi there I really need help I am struggling. I have been chatting to an advisor and they have not been helpful at all.

I am having an issue with the resizing of the website banner images we have designed for desktop and mobile phone on this website : https://yves-rocher.co.ke

As you can see the image does not fit according to the website banner images for mobile and desktop we were advised to use as per the Shopify help page. 

Please help. 

Thanks

[websensepro]

Hi @manekakknowle 

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.

img.block.overflow-hidden.w-full.h-full.object-cover.transition-opacity.duration-300.ease-linear.reposition-background-mobile {
    max-width: 100% !important;
    height: 100vh !important;
    object-fit: fill !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[manekakknowle]

Thank you for your help however it is still showing as is on the site. 

And I added the code at the bottom of theme.css

 

[websensepro]

Bro, the code is working fine, check the screenshot

[websensepro]

@manekakknowle  Try this

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

picture.relative.block.w-full.h-full.overflow-hidden.aspect-\[--wh-ratio\] img {
    max-width: 100% !important;
    height: 90vh !important;
    object-fit: fill !important;
}

[dmwwebartisan]

@manekakknowle 

Please check the following link 

https://pipeline.groupthought.com/sections/list-of-sections/image-banner

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code at the bottom of the file.

img.block.overflow-hidden.w-full.h-full.object-cover.transition-opacity.duration-300.ease-linear.reposition-background-mobile {
    max-width: 100% !important;
    height: 100vh !important;
    object-fit: fill !important;
}

Thanks!

[DaisyVo]

Hi @manekakknowle 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.image__hero__pane picture.relative img {
    object-fit: contain !important;
}
div.flickity-viewport {
    height: 450px !important;
}
.image__hero__frame {
    height: 450px !important;
    min-height: unset !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[manekakknowle]

Thank you Daisy for the solution. Seems like the Mobile desktop version is working however the Banner on desktop is not. please check the website here, on your PC: https://yves-rocher.co.ke

is there anything that can be done here?

[DaisyVo]

Hi @manekakknowle 

Our code can only work for mobile viewing. With the Desktop issue, it might cause by the code you added from other teams. Could you please remove their code and re-check it from your end?

Thank you!

Best,

Daisy - Avada Support Team. 

[manekakknowle]

Hi Daisy 

I have removed their code from theme.css however it is still having an issue. 

[DaisyVo]

Hi @manekakknowle 

For the Desktop view, I think you should contact the theme provider for further information. 

We have tried but couldn't figure it out. Hope you can kindly understand.

[Dan-From-Ryviu]

Hi @manekakknowle 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings. 

.image__hero__scale img { object-fit: fill !important; }

[manekakknowle]

Thank you this kind of helped for the desktop view you can see here -  https://yves-rocher.co.ke

however the images look a bit stretched out. Anything we can do here?