Mastering Your Shopify Hero Section: Fixing Text Layout Across Desktop & Mobile

Hey there, fellow store owners! Let's talk about something that can be a real headache but is absolutely crucial for your online presence: responsive design. Specifically, how your hero section looks on different devices. I've seen countless discussions in the Shopify community about this, and recently, a thread titled "Desk top and mobile text keeps getting messed up" really highlighted a common pain point.

Our friend afterlight was running into a classic dilemma with their "Savor theme": every time they tried to adjust the text layout in their hero section, fixing it for desktop would break it for mobile, and vice-versa. The text kept overlapping product photos, making the site look unprofessional and hard to read. Sound familiar? You're definitely not alone!

Understanding the Responsive Design Challenge

It's easy to assume that if your theme looks good on desktop, it'll magically translate perfectly to mobile. But the reality is, smaller screens require a completely different approach to layout and spacing. What works as a wide banner on a desktop often needs to become a vertical stack or have its elements repositioned on a phone. When themes don't offer granular control for both, or when custom content conflicts with default responsive rules, things can get messy.

Afterlight shared some clear visuals of what they wanted:

Desired Desktop Layout

For desktop, they wanted the text clearly positioned to the left, not obscuring the product image:

Desired Mobile Layout

And for mobile, they envisioned the text at the bottom of the hero section, perhaps with a background for better readability, again, away from the product:

These are excellent examples of providing clear requirements, which is always the first step to getting good help!

The Community's Go-To Fix: Custom CSS

The beauty of the Shopify community is how quickly experts jump in with practical solutions. In this thread, several members like Moeed, websensepro, and tim_1 offered up custom CSS snippets. This is often the most direct and powerful way to override theme defaults and get pixel-perfect control.

Here's how you can achieve a similar fix, combining the most effective suggestions from the thread:

Step-by-Step: Adding Custom CSS to Your Hero Section

This method involves using media queries in CSS, which are special rules that apply only when certain conditions (like screen width) are met. This allows you to target desktop and mobile independently.

1. Navigate to your Theme Customizer: From your Shopify admin, go to Online Store > Themes. Find your current theme, click Customize.
2. Select your Hero Section: In the customizer, click on your hero section (often called "Image Banner" or similar).
3. Find Custom CSS: In the settings sidebar for that specific section, scroll down until you see an option for "Custom CSS" or "Custom Liquid". This is where you'll paste the code.
4. Add the CSS for Desktop and Mobile: Paste the following combined code into the Custom CSS box. This code takes cues from Moeed's and websensepro's solutions, which directly addressed afterlight's desired layouts.

/* --- DESKTOP LAYOUT (Moeed's suggestion) --- */
@media screen and (min-width: 768px) {
.hero__content-wrapper.layout-panel-flex.layout-panel-flex--row.mobile-column.section-content-wrapper.page-width {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
}

/* --- MOBILE LAYOUT (websensepro's suggestion) --- */
@media screen and (max-width: 749px) {
  .hero__container {
    display: flex !important;
    justify-content: flex-end !important; /* Pushes content to the bottom */
    padding-bottom: 20px !important;
    min-height: 500px !important; /* Adjust if needed to give space for text */
  }
  .hero__content-wrapper {
    background: rgba(0, 0, 0, 0.7) !important; /* Adds a semi-transparent dark background */
    padding: 15px !important;
    width: 100% !important;
  }
  .hero__content-wrapper *,
  .hero__content-wrapper a {
    color: #ffffff !important; /* Ensures text is white for readability */
  }
}

Let's quickly break down what this code does:

• The @media screen and (min-width: 768px) block applies only to screens 768 pixels wide or larger (typically desktops and larger tablets). It adjusts the flex properties of the .hero__content-wrapper to stack content vertically and align it to the start (left) and center vertically, as afterlight requested for desktop.
• The @media screen and (max-width: 749px) block targets screens 749 pixels wide or smaller (most mobile devices). It uses justify-content: flex-end on the .hero__container to push the text content to the bottom. Crucially, it also adds a semi-transparent dark background (rgba(0,0,0,0.7)) and sets the text color to white (#ffffff) within the .hero__content-wrapper. This makes the text much more readable over any background image, which was a key issue for afterlight.

5. Save and Test: Don't forget to hit "Save" and then thoroughly test your hero section on various devices and browser sizes to ensure everything looks as intended.

An Alternative Strategy: Separate Sections for Desktop and Mobile

While custom CSS is powerful, sometimes you need even more control, or the CSS becomes too complex. tim_1 brought up an excellent alternative in the thread: using two separate hero sections and showing/hiding them based on screen size. This is a fantastic strategy for those who want to completely customize the content, imagery, and layout for each device type without complex CSS overrides.

Here's the gist of it:

1. Create Two Hero Sections: In your theme customizer, add two identical hero sections.
2. Customize Each Section: Design one hero section exactly how you want it to appear on desktop. Design the second hero section specifically for mobile. This means different text, images, or even different content blocks if you wish.
3. Add CSS to Show/Hide: For the desktop-specific section, you'd add custom CSS like @media (max-width: 767px) { .your-section-class { display: none !important; } }. And for the mobile-specific section, you'd add @media (min-width: 768px) { .your-section-class { display: none !important; } }. You'll need to identify the specific CSS class for each of your hero sections.

This approach gives you maximum flexibility, but it does mean managing two sections instead of one. It's often worth it for critical areas like your hero banner!

Resolving responsive layout issues can feel like a game of whack-a-mole, but with a bit of custom CSS magic or a smart structural approach like using separate sections, you can get your Shopify store looking sharp on every device. Big thanks to the community members for sharing their expertise and helping afterlight (and now, hopefully, you!) get this sorted. Keep experimenting, keep testing, and don't hesitate to dive into that custom CSS box!