How do i vertically align my products on my product page and them having the same hight en width

Shopify Discussion

Topic summary

Goal: vertically stack two product images and make them the same width/height on the product page. A screenshot was shared (image is central to understanding the layout).

Support offered:

  • One helper requested the store URL to provide targeted help.
  • Another provided a concrete fix: in Admin > Online Store > Themes > Actions > Edit code, open Assets > base.css and add a media query for screens ≥750px that sets “.product__media-item.grid__item” width and max-width to 100%. Also set the Desktop layout to “stacked” in the theme customizer.

Notes:

  • The suggested CSS focuses on stacking and full-width display; equal image heights were not specifically addressed.

Status: No confirmation from the original poster; resolution pending/ongoing.

Summarized with AI on December 28. AI used: gpt-5.
1

Schermafbeelding 2024-05-20 105521.png
Schermafbeelding 2024-05-20 105521.png1920×1080 385 KB

i want those two product pictures verticallt under each other and them to have the same witdh and height

2

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

3

Hi @ThijmenKnip ,

Just follow the instructions below.

  1. Go to your Admin page > Online store > Themes > Actions > Edit code.

  2. Open the base.css file under Asset folder and paste the code below.

@media screen and (min-width: 750px) {
.product__media-item.grid__item {
width: 100% !important;
max-width: 100% !important;
}
}

Keep the Desktop layout as stacked from Customizer

Hope to have helped you,

Do like the post if it worked for you,
And Mark it as a Solution to close the Query

BR

Dawood Mirza