STUDIO theme - How to make product page wide layout

Store Design

Topic summary

Product pages in the STUDIO theme appear too narrow; the requester wants a wider layout (an image was attached for reference). After being asked for the site URL, they shared adameda.com.

Two CSS-based solutions were proposed:

  • Add a media query to the end of base.css to set .page-width to full width on large screens (min-width 1400px), effectively removing the max-width cap for desktops.
  • Edit section-main-product.css to, on screens ≥990px, increase the MainProduct template’s width by setting the --page-width CSS variable (suggested 90%, adjustable) and force the product media slider to max-width: 100% to utilize the wider layout.

Outcome: The requester confirmed the change works, indicating the issue is resolved. No further questions or disagreements remained. Technical notes: both approaches rely on CSS media queries to widen the container; the second approach uses a theme CSS variable and explicitly expands the product media area.

Summarized with AI on January 30. AI used: gpt-5.
1

STUDIO - How to make a product page-wide layout

The frame on the product page looks very narrow and I want to have a wide frame to display the products

Pls see attached photo for your understanding

2

@Aadhiss - can you please share this page link?

3

https://adameda.com/

1 Like
4

@Aadhiss - please add this css to the very end of your base.css file and check, it should work properly on bigger screens

@media screen and (min-width:1400px){
.page-width {max-width: 100%;}
}
5

Hi @Aadhiss

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (min-width: 990px) {
    .page-width[id^="MainProduct-template"] {
        --page-width: 90%;
    }
    .product__media-wrapper .pmslider-root.pmslider-root--dl-v {
        max-width: 100% !important;
    }
}

PageFlyRichard_0-1678520420444.png
PageFlyRichard_0-1678520420444.png1835×838 311 KB

NOTE: You can change 90% to fit your website

I hope it would help you
Best regards,

Richard | PageFly

1 Like
6

Thanks, man, it is working well.

1 Like