Refresh Theme - reduce size of image

[Edgard22]

Hi 🙂 

My website is : https://www.brasebreizh.fr 

I would like to know how to reduce the size of my image below the video 

could you help me ? thanks a lot 

[GTLOfficial]

Hello @Edgard22,
Go to online store ---------> themes --------------> actions ------> edit code-------> go to  base.CSS file ----->
and add this code at the very bottom of the file.

.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 35px;
    height: 78%;
    width: 73%;
    margin: 0 auto !important;
    left: 0;
    right: 0;
}

and the result will be

Please let me know,
Thanks

[Edgard22]

HI @GTLOfficial 

it's working BUT it's disturbing my blocs below 😕 

Any idea ?

[GTLOfficial]

can you please replace it with this CSS 

.banner .media>*:not(.zoom):not(.deferred-media__poster-button) {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

[GTLOfficial]

Hello @Edgard22 
can you try this css

.banner .media>*:not(.zoom):not(.deferred-media__poster-button) {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

[Edgard22]

Hi @GTLOfficial 

it's working but not centered as you can see : https://www.brasebreizh.fr 

[dmwwebartisan]

@Edgard22 

Please add the following code at the bottom of your css file.

.media>img{
object-fit: none !important;
}

[BSS-TekLabs]

- Here is the solution for you

- Please follow these steps:

- Then find the base.css file.

- Then add the following code:

.banner__media img {
    object-fit: contain;
    padding-left: 14%;
    padding-right: 14%;
}

- Then press 'Save' to save the code.

- Here is the result you will achieve:

- You can also increase it by 14% for a larger gap, or decrease it by 14% for a smaller one."

- Good luck. If you find it helpful, please press like and mark it as the solution.