Say Goodbye to Awkward Gaps: How to Perfectly Align Images and Text in Your Shopify Sections

View original discussion by JustinasR on Shopify Community →

Hey there, fellow Shopify store owners! As a migration expert and someone who spends a lot of time digging through the Shopify community forums, I often see common design headaches that pop up again and again. One such recent discussion really caught my eye because it’s a problem many of you might have faced: getting those image and text blocks on your pages to line up perfectly.

Our friend JustinasR recently posted in the community about a tricky layout issue. They had a custom section where an image and its accompanying text box weren't matching in vertical height, leaving an awkward gap. On top of that, there were horizontal alignment inconsistencies on desktop and even an empty row appearing on mobile. Sound familiar? It’s a classic case of custom code not quite playing nice with the theme’s default styling.

Understanding the Root Cause: Why Do Gaps Appear?

Before diving into the fixes, it’s helpful to understand why these gaps happen. Community experts like VikashJ and DanielAnderson quickly chimed in with great general advice. They pointed out that this usually stems from how your theme&rsquos CSS handles the two columns (image and text). Often, these columns are set to size independently, meaning one might be taller based on its content (say, a long text description) while the other (the image) has a fixed height or doesn't stretch to match.

The key insight here is that for a clean, gap-free layout, you need to tell both columns to stretch to the height of the tallest one. This is typically managed using CSS properties like display: flex; and align-items: stretch; on the parent container that holds both the image and text columns. Then, you ensure the image itself fills its container without distortion using height: 100%; width: 100%; object-fit: cover;.

DanielAnderson also added that if your section uses a grid layout, you'd apply align-items: stretch; to the parent grid container and remove any fixed min-height on the text card that might be preventing it from expanding.

The Specific Fixes: A Deep Dive into JustinasR's Custom Section

While the general advice is super helpful, JustinasR’s problem was with a custom section, specifically a file named sections/naujas.liquid. This is where the brilliant community member Ploqo stepped in with highly specific, actionable code changes. Let's break down the solutions:

1. Matching Image and Text Heights (Eliminating the Main Gap)

Ploqo quickly identified that the image wrapper in JustinasR’s custom section had a fixed height: 200px;. This was the primary culprit preventing the image from stretching to match the text content. Here’s what Ploqo suggested to fix it:

The Problem Visualized:

Before - the image stops 200px short of the text card

Here’s how to apply the fix:

  • Go to your Shopify Admin, navigate to Online Store > Themes.
  • Find your current theme and click Actions > Edit code.
  • In the theme editor, open the file named sections/naujas.liquid. (Note: Your custom section might have a different name, but the principles remain the same.)
  • Look for the