How can I align main product width with menu in DAWN?

Store Design
, , ,

Topic summary

Goal: Align the main product section’s width with the site menu in the Dawn theme while keeping a 50/50 split between product images and description.

Attempt: A CSS media query was applied to .page-width at ≥750px to set max-width: 60% !important. This change affects other sections but not the product section.

Code used:

  • @media screen and (min-width: 750px) { .page-width { max-width: 60% !important; } }

References: Two screenshots were provided—one showing the desired alignment and another example. These visuals are central to understanding the layout goal.

Next steps: A responder requested the store URL (and password if protected) to inspect the issue. The original poster asked how to share those details privately.

Status: Unresolved. Awaiting private sharing of store access details so further diagnosis can be made.

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

Hi,

I am trying to align the main product width to menu and at the same time maintain 50% for each image and description. I have used the below code which is working for the rest of sections apart from this one. Would appreciate if someone could help please. Thanks

@media screen and (min-width: 750px){
 .page-width {
    max-width: 60% !important;
 }
}

this is what is required:-

Screenshot 2023-09-20 at 14.26.45.png
Screenshot 2023-09-20 at 14.26.45.png2660Ă—1192 261 KB

example:-

Screenshot 2023-09-20 at 14.48.57.png
Screenshot 2023-09-20 at 14.48.57.png2592Ă—1936 335 KB

1 Like
2

Hi @MrJavy

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Hi, Thanks for getting back. How do I give you those details in private?