product section width

Shopify Discussion

Topic summary

Issue: A sticky sidebar overlaps the product grid; the merchant wants products aligned to the right side.

Proposed fix: Add responsive CSS so, from 750px width and up, the main grid narrows and floats right, and the footer spans full width:

  • .index-section .grid–full: max-width: calc(1220px - 330px); float: right
  • #shopify-section-footer: width: 100%; overflow: hidden

Implementation attempts:

  • Adding the CSS in Theme settings (Customize > Theme settings > Custom CSS) triggered the error: “ONLINE STORE SESSION CANT BE PUBLISHED.”
  • Suggested workaround: insert the CSS inside a block after in theme.liquid (Online Store > Themes > Edit code), using the same @media (min-width: 750px) rules.

Current status: After adding the code to theme.liquid, the merchant shared a screenshot showing how the store now looks. Outcome/resolution not confirmed; further guidance may be needed based on the visual result.

Notes: Screenshots were provided to illustrate the overlap and the post-change layout.

Summarized with AI on December 12. AI used: gpt-5.
4

So please add this code to theme.liquid file after in Online Store > Themes > Edit code

@media (min-width: 750px) { .index-section .grid--full { max-width: calc(1220px - 330px); float: right; } #shopify-section-footer { width: 100%; overflow: hidden; } }
1 Like