Optimize Image Display on Mobile: Request for Equal Margin Fill

[stg_herve]

Hello

I would like the two images in the mobile version to fill the margins highlighted in red, if possible. Equally. 

Website : https://www.draegerparis.com/ 

Thanks

[rajweb]

Hey @stg_herve ,

To make the two images in the mobile version on your website fill the margins evenly, you can adjust the CSS of the section containing them. Here's what you can try:

Log in to your Shopify Admin:

1. Online Store > Themes > Edit Code   (if you need to make manual changes).

2. Add the Following CSS:

Navigate to Assets >  theme.css(or base.css, depending on your theme).

Add this code at the bottom of the CSS file

/* Adjust the two images to remove side margins */
.your-section-class {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.your-section-class .image-container {
  width: 50%;  /* Ensure both images take equal width */
  padding: 0;  /* Remove internal padding */
  margin: 0;   /* Remove any margin between images */
}

.your-section-class img {
  width: 100%;  /* Ensure images fill the container */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Adjust how the image fits */
}

Replace Placeholder Class Names:

Identify the exact class names used in your section (e.g.,.your-section-class or .image-container).

To find this, right-click the section on your website and select Inspect. Look for the class names associated with the section and the images.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[websensepro · Accepted solution]

Hi @stg_herve ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media (max-width: 768px) {  
    .gallery.grid {
        gap: 0px;  
    }

    .container {
        padding: 0;  
    }
}
</style>

Result :

If my reply is helpful, kindly click like and mark it as an accepted solution. 
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[stg_herve]

Hello 

Thank you so much !

Best regards

[websensepro]

After reviewing your store, my suggestion is to install Big Bulk Discount to boost your average order value. Our app adds tiered discounts, encouraging larger purchases and driving more revenue with minimal effort. Start increasing sales today! https://apps.shopify.com/big-bulk-discount