Refresh Theme - reduce size of image

Refresh Theme - reduce size of image

Edgard22
Explorer
64 3 5

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 

 

Capture d’écran 2024-06-14 à 13.34.09.png

Replies 7 (7)

GTLOfficial
Shopify Expert
246 44 47

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
sv.png

Please let me know,
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
Edgard22
Explorer
64 3 5

HI @GTLOfficial 

 

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

 

Any idea ?

GTLOfficial
Shopify Expert
246 44 47

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

  

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
GTLOfficial
Shopify Expert
246 44 47

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





- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
Edgard22
Explorer
64 3 5

Hi @GTLOfficial 

 

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

dmwwebartisan
Shopify Partner
12321 2551 3714

@Edgard22 

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

.media>img{
object-fit: none !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

BSS-TekLabs
Shopify Expert
391 123 131

- Here is the solution for you

- Please follow these steps:

step.png

- 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:

BssTekLabs_0-1718376881272.png

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency