Issues with slider images stretching on LeArt Shopify Theme

[wharfie79]

Hi there,

I am currently taking over the updating of this website from a coworker who has left.
The website is: https://planners.teachthis.com.au/
I am hoping someone can help me to work out what is going on please.

We are using the LeArts Shopify theme and I need to update and change the slider images on the homepage. Shopify recommends that the images be 1720 x 700 px for this particular theme section. I have created one image (the blue one - first in the slider) and it is stretching and seems distorted. Ignore the other pink slider images. These will be updated too once I work out how to get the correct sizing.

I would like the slider to fit across the whole page on all desktops and mobile apps. This particular theme does not seem to include a section to adjust the height and width of the slider display, as some of the newer themes do. I have played around with the design of my banner and tried to move elements around to ensure it doesn't crop off text but it still looks huge, distorted and pixelated. It's annoying me that is just won't work like it should.

Please note, I have minimal coding knowledge or experience but I do know which section to access to edit code. I just don't know where I need to edit the code or what code I need. Help please but be gentle lol! Banner attached below.








Thanks,
wharfie79

[Henry_dev]

Hi @wharfie79 
I see that your slide item is using images that contain text. To ensure that the text on the image is not cut off, you need to make sure that the height and width meet the ratio of the image. For example, if the image has a ratio of 3:4 => ratio: 0.75. You need the following CSS:

.home3-slider {
    --aspect-ratio: 0.75;
    padding-top: calc(100% /(0.0001 + var(--aspect-ratio, 16 / 9)));
    height: auto !important;
}

As it stands, your image has a ratio (w/h) of 3584/1459 = 2.46 => —aspect-ratio: 2.46. Use this css:

.home3-slider {
    --aspect-ratio: 2.46;
    padding-top: calc(100% /(0.0001 + var(--aspect-ratio, 16 / 9)));
    height: auto !important;
}
.home3-slider .swiper-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

 The other slide images just need to have the same ratio.

[wharfie79]

Hi there,

Thank you so much for replying so quickly and I appreciate you explaining about the ratios and for giving me some code to fix the problem>

I am embarrassed to ask this but I am a total newbie, where do I paste the code you have suggested? Is there a particular .css file I am looking to edit and paste the code in?

Thank you kindly 🙂

[Henry_dev]

Hi @wharfie79  You can add this code to assets/theme-custom.css

[wharfie79]

I have more questions - sorry!
I am in the Assets section of the code but there are a few options...

Also is there a certain place within the theme file I need to paste the code