Help me crop the main banner

MT27
Explorer
68 6 3

Please help me crop the image on the bottom, I have attached a screenshot of where I like the crop to finish. I have tried with CSS but I cant figure It out.

 

MT27_0-1705680166938.png

URL: https://matibrnd.com/

Pass: biangu

Replies 2 (2)

MT27
Explorer
68 6 3

Only for desktop please

BSS-Commerce
Shopify Expert
3398 450 503

Hi @MT27 ,

It seems the problem you are having is that the banner image on your page is displaying at an unhealthy ratio. You can edit the CSS so that your banner displays as follows:

view - 2024-01-24T174516.492.png

You can take the following steps to fix the code:

Step 1: Select Online store and select Edit code:

view - 2024-01-24T174559.275.png

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

Step 3: Open the file and scroll to the bottom of the file, then add the following code:

 

@media screen and (min-width: 768px)

.banner__media.media img {

object-fit: cover !important;

​object-position: center center !important;

}

 

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

Hope it helps @MT27 

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