I have a vertical menu as I want it - but page content is scaling into the menu

Store Design
, ,

Topic summary

A Shopify store owner created a vertical menu that displays correctly on large screens and phones but breaks on medium-sized screens like iPads. On narrower viewports, page content slides underneath the menu instead of properly scaling alongside it.

Solution provided:

  • Add CSS code to base.css in the Assets folder
  • Apply left margin (12%) to specific elements: the product grid section and collection hero banner
  • This forces content to respect the menu’s width across all screen sizes

Outcome: The CSS fix resolved the scaling issue. The discussion is marked as resolved.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi all, I have sucessfully setup a vertical menu setup on my Shopify page some time ago. I’ve been ignorant enough to not log exactly what I have changed in the code :see_no_evil_monkey: . I’ve only now found out the page looks fine in a big screen or a phone screen, but does not scale well on smaller screens, such as an iPad. This is a page on the site as an example:

https://printopia.eu/collections/kleurenmultifunctionals

On full width the page looks fine, but when you make the window more narrow the page content creeps under the menu, instead of scaling. How can I make the content ‘respect’ the full width of the menu?

1 Like
2

Hello @OttoS

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
div#shopify-section-template--23825308942604__product-grid {
margin-left: 12%;
}
.collection-hero.color-scheme-1.gradient {
margin-left: 12%;
}

devcoders_0-1748098529557.png
devcoders_0-1748098529557.png1351×601 72.4 KB

2 Likes
3

Thank you very much for that fast response, it did the trick :folded_hands:

1 Like
4

Hello @OttoS
Thank you for getting back to me. I’m happy to hear that it worked for you. Should you need any further help, please don’t hesitate to reach out. If you found the post helpful, kindly consider giving it a like.