Product Photo till the edge of the window on Product page – Publisher theme

[jensberly]

Hello,

I want to expand the picture of the product on the product page till the edge of the window, occupying approximately half of the screen.

Here’s a screenshot of the planned design:

and a screenshot of what it looks like now:

Any ideas?

Thanks in advance!

The site url: https://litichevskaya.myshopify.com/ pw: I’ll send to you via pm!

[Made4uo-Ribe]

Hi @jensberly ,

Would you mind to share the password? Ill try.

Thanks!

[jensberly]

Thank you! I’ve just sent you a pm

[Made4uo-Ribe]

Thank you for the information.

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    --contained-width: 600px;
}

Result:

I hope it help.

[jensberly]

Hey! Thank you so much for your response. What I actually meant was to be able to expand the picture to the edge of the window, like this:

Any idea? Thank you!

[Made4uo-Ribe]

I just want to clarify.

You want to expand more the image or move the image on the edge?

Thanks!

[jensberly]

Move the image to the edge of the window I basically want it to start where the window starts on the left – sorry if it sounds confusing!

[Made4uo-Ribe]

Thank you. No worries at all. I just want to clarify before working out.

This what I did the Image is already at the edge of the section. So I reduce the padding for the whole section cause that is the cause of space. But the small Image will go too so I add the padding on the small image. Here is the result.

And this isthe code.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

section#MainProduct-template--19292503081274__main {
    padding-left: 0px;
}

This is for the big Image.

ul#Slider-Thumbnails-template--19292503081274__main {
    padding-left: 40px;
}

And the small Image. You can change the sizes whatever you want.

I hope it help.