How can I keep my website banner size consistent when resizing the window?

[1KNDclothing]

Hey Everyone,

I want to have my website banner just shrink as the window size changes, on my website as I change the window size I lose parts of the banner and then the text and image doesnt look as good. here: https://www.1kndclothing.co.uk/

But I want my banner to work like this one if possible, so regardless of the window size it keep everything visible until you go to mobile view, website here: https://veganoutfitters.com/

Does anyone know how to achieve this?

Thank you

[BSS-Commerce]

Hello @1KNDclothing, I have read your problem.

I checked your website banner and found a way to display the full image when resizing. However, your previous code does not support changing the image height when resizing.

This will be a way to help your banner display better. I checked that your banner image is focusing on the left side of the image, so you can adjust the code so that when resizing the content is focused on the left side.

You can take the following steps to fix the code:

Step 1: Select the Online store and select Edit code:

Step 2: In the code editing interface, search for file: base.css

Step 3: Open the file, press Ctrl + f and enter media > img to search, you will receive the following code as a result:

.media>img {

object-fit: cover;

object-position: center center;

transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

Please replace that code with the code below

.media > img {
object-fit: cover;
object-position: center center;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Step 4: Save the file changes and test the new look of your row.

Hope it works @1KNDclothing 

[1KNDclothing]

thank you so much for the reply I really appreciate it, But you have said to replace the code with the same code?

regards

[BSS-Commerce]

Hey @1KNDclothing ,

I apologize for the slight confusion, please replace the code circled in red with the following code:

.media>img {

object-fit: cover;

object-position: left;

transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

[1KNDclothing]

Hi, thank you so much for getting back to me, I change the code as stated but nothing changed.