Optimize Image Display on Mobile: Request for Equal Margin Fill

Store Design
, ,

Topic summary

A user seeks to adjust mobile image display so two images fill the available margins equally, eliminating red-highlighted gaps.

Solutions Provided:

  • CSS Approach: Modify theme CSS files (theme.css or base.css) using flexbox properties. Set parent container to display: flex with padding: 0 and margin: 0. Each image container should be width: 50% with images set to width: 100% and object-fit: cover.

  • Custom CSS Injection: Add CSS directly in theme.liquid file before </head> tag targeting the specific section and image containers.

Key Technical Notes:

  • Users must identify actual class names via browser inspect tool (right-click section, select Inspect).
  • Replace placeholder class names (.your-section-class, .image-container) with site-specific values.
  • Changes require Shopify Admin access: Online Store > Themes > Edit Code.

Status: Original poster confirmed the solution worked. One responder also promoted a discount app for increasing sales.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello

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

GALLERY IMAGE.png
GALLERY IMAGE.png500×692 237 KB

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

Thanks

2

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

3

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

Result :

Screenshot 2024-10-24 172258.jpg
Screenshot 2024-10-24 172258.jpg405×557 38.3 KB

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!

1 Like
4

Hello

Thank you so much !

Best regards

5

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