Image with text - Debut Theme - Same Size

Store Design
1

Hello,

I want to make the 4x ‘Image with texts’ on my homepage to be the same size image.

Depending on which image I upload depends on the size of the image.

www.kingandqueenjewellery.com

Password: KAQ2021

Thanks

Saul

Screenshot 2022-07-21 at 20.35.21.png
Screenshot 2022-07-21 at 20.35.21.png2356×828 242 KB

Screenshot 2022-07-21 at 20.35.45.jpg
Screenshot 2022-07-21 at 20.35.45.jpg2362×1132 199 KB

1 Like
2

Hi @KingandQueen ,

I might not completely understand your question. But if you want the image to be the same size no matter what you put in, then you can use the code below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.scss
  3. Paste the code below at the very bottom of the file.
.feature-row__image-wrapper.js > div {
aspect-ratio: 1;
}

.feature-row__image.lazyautosizes.lazyloaded {
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
}
1 Like
3

Hi,

I think you have understood correctly.

Will this work for all devices? Mobile, Tablet and desktop?

Or will I need additional coding?

Thanks

Saul

4

@KingandQueen ,

Yes. The code is device friendly. The code is suppose to make your images square

5

Thank you.

The size is quite large, what do I need to add to it, to adjust the size of the image? Again, I want this to be flexible based on the device being used.

Thanks

Saul

6

Also not all of my images are the same size still.

Please check the website.