hi there
my store url is sundip1.myshopify.com and i have sticky side bar and its overlapping my products i need my products to be on right side
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.
Hi @BDPK
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (min-width: 750px) {
.index-section .grid--full {
max-width: calc(1220px - 330px);
float: right;
}
#shopify-section-footer {
width: 100%;
overflow: hidden;
}
}
thanks for the solution but after putting this code it says
ONLINE STORE SESSION CANT BE PUBLISHED
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
after adding given code my store seems like this