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

[dmwwebartisan]

@Edgard22

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

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

[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%;
}

[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.

[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