MOBILE AND DESKTOP BANNER DIMENSIONS

Store Design
, ,
1

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

1 Like
2

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!

3

@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!

4

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

Screenshot 2025-01-06 at 09.39.56.png
Screenshot 2025-01-06 at 09.39.56.png2828×1520 491 KB

5

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

image (26).png
image (26).png349×655 197 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

2 Likes
6

Bro, the code is working fine, check the screenshot

websensepro_0-1736146440844.png
websensepro_0-1736146440844.png634×530 166 KB

7

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?

8

@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 
picture.relative.block.w-full.h-full.overflow-hidden.aspect-\[--wh-ratio\] img {
    max-width: 100% !important;
    height: 90vh !important;
    object-fit: fill !important;
}
9

Hi @manekakknowle

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

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

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.

11

Hi Daisy

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

12

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?

13

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.

1 Like