Hey, I am newish to Shopify. I am fairly good with HTML and CSS but I cannot seem to figure this out.
So on my product page, I have two images side by side right smack dab in the middle of the screen, but only when in fullscreen mode. In any other mode the pictures are slightly off-centered or when you switch to mobile the pictures do not stay next to each other and they appear half off of the screen.
So basically what I would love is for both of the images, the front and back of a piece of clothing, stuck right by each other and always centered on the screen right above the purchase button and description. I am editing the Boundless theme if that helps at all.
Fullscreen Half a screen About phone size
And here is the code I have altered for this result in themes.scss.liquid
/*================ Product images ================*/
.product__photo {
position: relative;
max-width: 600px;
margin: 0 auto 0 auto;
text-align: center;
display: inline-block;
}
.product__photo--single {
position: relative;
img {
position: absolute;
top: 0;
left: 50%;
right: 50%;
min-width: 100%;
min-height: 100%;
z-index: 1;
margin: 0 10px 0 10px;
float: none;
}
