Mastering Responsive Shopify Sections: Desktop 50%, Mobile 12% (The CSS Way)

Ever found yourself pulling your hair out trying to get a Shopify section to look just right on both desktop and mobile? You're not alone! This is a super common challenge for store owners looking to fine-tune their storefront's aesthetics and user experience.

Recently, a fellow merchant, adm_zx, brought this exact dilemma to the Shopify Community. They were struggling to resize a specific section to display at 12% on mobile devices, but then expand gracefully to 50% on desktop screens. It sounds straightforward, but as anyone who's dabbled in custom CSS knows, the devil is often in the details!

The Challenge: Responsive Section Sizing

The core problem adm_zx faced was getting a section to adapt its size dynamically based on the screen width. They shared a screenshot of the section they were working on, which looked like a content block:

They also shared their store URL, wearsaish.com, which is always the best first step when asking for help in the community! It allows others to inspect the live site and see exactly what's going on.

Initial Attempts & The Community's Guidance

It seems adm_zx was already on the right track, likely experimenting with media queries. One of the community experts, tim_1, chimed in with some crucial insights, noting that an approach like this:

@media (min-width: 768px) {
  html body #shopify-section-template--28779820548483__177584852133dd76f8 .section {
    --section-min-height: 50svh;
  }
}

...while heading in the right direction with a media query, had a couple of common pitfalls:

1. CSS Specificity: This rule might not override existing styles unless you use !important. When a style is set directly on an element or has higher specificity elsewhere, your new rule needs a little extra oomph.
2. Cryptic IDs: Relying on long, auto-generated Shopify section IDs (like #shopify-section-template--28779820548483__177584852133dd76f8) is generally not ideal. These can change if you duplicate the section or theme, making your CSS brittle.

The Recommended Solution: Custom CSS and Viewport Units

tim_1 offered a much cleaner and more robust solution that leverages the "Custom CSS" setting available in most modern Shopify themes. This feature automatically provides the correct, stable selector for the section you're editing, avoiding those cryptic IDs.

The key to achieving responsive sizing that maintains a proper aspect ratio, as tim_1 highlighted, is using viewport units, specifically vw (viewport width). This means the height of your section will scale proportionally with the width of the user's screen.

Here's how to implement the solution to get your section to be roughly 12% of the viewport height on mobile and 50% on desktop, keeping in mind we're adjusting --section-min-height which affects the section's vertical size:

Step-by-Step Instructions

1. Access Your Theme Customizer: From your Shopify admin, go to Online Store > Themes. Find your current theme and click the "Customize" button.
2. Navigate to Your Section: In the theme customizer, click on the specific section you want to resize.
3. Locate Custom CSS: In the left-hand sidebar settings for that section, scroll down until you find a field labeled "Custom CSS" or something similar. This is where the magic happens!
4. Add Your CSS Code: Paste the following code into the "Custom CSS" box:

   /* Default for mobile (screens smaller than 768px) */
   .section {
       --section-min-height: 12vw; /* Sets minimum height to 12% of viewport width */
   }
   
   /* For desktop and larger screens (768px and up) */
   @media (min-width: 768px) {
       .section {
           --section-min-height: 50vw !important; /* Sets minimum height to 50% of viewport width */
       }
   }

5. Save Your Changes: Don't forget to click "Save" in the top right corner of the theme customizer!

Understanding the Code

• .section: When you use the "Custom CSS" box for a specific section, this .section selector automatically targets that particular section, simplifying your code and making it more robust.
• --section-min-height: This is a CSS custom property (or variable) commonly used in Shopify themes to control the minimum height of a section. By setting this, you ensure your section doesn't collapse too much, maintaining its visual presence.
• 12vw and 50vw: These are viewport width units. 1vw equals 1% of the viewport's width. So, 12vw means the section's minimum height will be 12% of the current screen's width, and 50vw will be 50%. This is incredibly powerful for maintaining an aspect ratio! If your screen gets wider, the section's height increases proportionally.
• @media (min-width: 768px): This is a CSS media query. It tells the browser, "apply the styles within these brackets ONLY when the screen width is 768 pixels or wider." This is how we differentiate between mobile (less than 768px) and desktop (768px and up).
• !important: As tim_1 pointed out, the !important flag is sometimes necessary. It forces your style to override any other conflicting styles that might be applied to the same element, ensuring your custom rule takes precedence. Use it judiciously, but it's a lifesaver when theme styles are stubborn.

This approach gives you precise control over your section's height, making it adapt beautifully across devices. It's a fantastic example of how a small, targeted piece of CSS, combined with smart use of Shopify's theme features, can make a huge difference in your store's presentation.

Remember, the exact vw values (like 12vw or 50vw) might need a little tweaking to perfectly match your visual goals, as the original request was for a "percentage" which can sometimes imply width or overall area. But by adjusting these numbers, you'll quickly find the sweet spot for your design. Happy customizing!