hey bro one last thing how can I make the next image the same size and aligned just below the first image?
Topic summary
Goal: make the product image appear taller (extend lower on the screen) on a Shopify product page and align a second image to the same size underneath.
Key context:
- URL shared: https://nerve-concepts.com/products/nerve-racing-club-tee
- Theme: Dawn (Shopify).
- Initial issue: back-view photo is rectangular while front-view is square; auto-resizing prevents desired taller look.
Actions taken:
- First advice: match image formats via cropping. OP clarified they want a taller display without enforcing square.
- CSS added in base.css: set the product media lightbox to use object-fit: contain. Result: height correct but width not as desired.
- Clarification: to display as a square, the source image must be square. OP confirmed this worked for their need.
Follow-up request:
- Make the next image the same size and aligned below the first. CSS suggested under a desktop media query to set product media items to max-width: 100%, requiring both images in the same format. When it didn’t apply, an updated rule with !important was provided to enforce it.
Status: pending confirmation after the final CSS change. Images/screenshots are central to understanding the desired layout.
