Can't change Debut theme product image full width

Store Design
1

Hi everyone,

The default setting for my product page (Debut theme) is giving me a full width giant image with everything else below that. I’d like for the product page to display in the default setting, as per the demo version of Debut. Unsure why it hasn’t done that originally anyway. Please can someone tell me if this requires a few minor coding fixes?

Thanks!

2

@HaileyR - yes it will need few css code changes, can you share the page link where you have this image?

3

Hi, thanks for the speedy reply. The page is here - https://duvetdomes.com/products/duvet-domes-24-piece-pack

Thanks!

4

@HaileyR - it is not full width image actually -

suyash1_0-1647070407117.png
suyash1_0-1647070407117.png1366×768 277 KB

5

Okay, thanks. It doesn’t look the same as the demo version of Debut’s product page listing though, which has the image much smaller to the left hand side of the page, with corresponding copy and details to the right hand side. Ref - attached screenshot of Debut’s demo product page.

Is there a reason why it wouldn’t be loading the same design as the corresponding demo? And if so, is there a fix for it?

Screen Shot 2022-03-12 at 8.43.11 PM.png
Screen Shot 2022-03-12 at 8.43.11 PM.png2476×1416 230 KB

6

@HaileyR - please check all product page settings in your customize option, you will have some setting in there

7

I’ve had a look through the settings and some of the code, but I can’t figure it out hence why I’ve written to the community board for help :slightly_smiling_face: I’m hoping it is just a piece of code that needs to be copied and pasted into a liquid section maybe? Any additional help appreciated, thanks.

8

Hi @HaileyR ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (min-width: 990px) {
    .product-single {
        display: flex;
    }
    .product-single .thumbnails-wrapper .grid__item {
        width: 20%;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Thank you so much, that fixed the problem and it all looks great :slightly_smiling_face: