Retain Banner Size when shrinking window

1KNDclothing
Tourist
24 0 2

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

Replies 4 (4)

BSS-Commerce
Shopify Expert
3477 460 516

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:

view - 2024-01-08T164053.428.png

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 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

1KNDclothing
Tourist
24 0 2

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
Shopify Expert
3477 460 516

Hey @1KNDclothing ,

BSSCommerce_0-1704769925481.png

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

}

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

1KNDclothing
Tourist
24 0 2

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