2 Product Images side by side - Dawn Theme

Store Design
1

Hey,

I am currently trying to recreate the look of this store. I would like to have 2 product images side by side. Sadly I didnt find a solution. I would be really happy, if someone knows how to code this.

Screenshot_29.png
Screenshot_29.png2557Ă—1331 456 KB

2

@drew23

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
.product__media-item:first-child {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important;
}
}
3

Hi @drew23 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
	.product__media-item:first-child {
		width: calc(50% - 0.5rem) !important;
	}
}

Hope it helps!

4

Hey thanks for the solution. Now I have a problem, where the images are to small and if I increase the image size it turns back into one image on top and the rest below. The problem is probably is that the “white wall” is too thick and I already have the page width on 1600. Do you know how to increase it to make it look more like the example I send.

Screenshot_36.png
Screenshot_36.png2534Ă—1255 267 KB

5

Hi @drew23 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

6

https://brokenmind.com/ TEST001

7

Hi @drew23 ,

Go to Assets > base.css and paste this at the bottom of the file:

#MainProduct-template--16248727994603__main {
    max-width: none !important;
}

Hope it helps!

8

Hello, is it possible to only have the split screen apply on desktop, then default to automatic scroll for mobile?