Decrease max width banner image on productpage (2 images)

Store Design
, ,

Topic summary

A user seeks help adjusting the maximum width of a banner image (containing 2 images) on their Shopify product page to align with an “image with text” section positioned above it.

Initial Solution Attempted:

  • A CSS modification was suggested targeting .banner.banner__media-half with object-fit: fill
  • Applied via the theme’s base.css file

Current Issue:

  • The proposed CSS fix doesn’t display correctly on large screens
  • The banner images remain misaligned with the text section above
  • The user specifically wants the side images to match the width/alignment of the upper section

Status: The discussion remains open with the alignment problem unresolved. The user is awaiting further CSS optimization guidance to achieve proper responsive layout on desktop displays.

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

Does anyone perhaps know how to resize my banner image (with 2 images) on my product page on desktop so that it aligns with the image with text above it?

https://www.car-essentials.nl/products/draadloze-led-verlichting-auto-interieur

It’s about the third section below the image with text

2

Hi @AlecH

You can try this code by following these steps:

  1. Go to Shopify Admin → Online Store ->Theme → Edit code

  2. Chose file base.css, insert this code then save:

.banner .banner__media-half img {
 object-fit: fill;
}

Here is result:

image.png
image.png1268×895 217 KB

Hope this can help you.

Kind regards

3

Hi! Thanks for your response! However, now it still doesn’t display quite right on a large screen, as you can see from the image. I actually want the images on the side to align with the image with text section above it. Is this possible?

Scherm­afbeelding 2024-05-10 om 10.15.57.png
Scherm­afbeelding 2024-05-10 om 10.15.57.png1871×920 247 KB