Tidy Up Your Mobile Store: Fixing Pesky Image-Text Gaps on Shopify

Hey there, fellow store owners! As a Shopify migration expert, I spend a lot of time diving into the nitty-gritty of store customization, and honestly, some of the most frustrating little hiccups often come down to seemingly simple things like spacing. Today, I want to talk about a common issue that popped up in the Shopify community recently: those pesky gaps between images and text blocks on mobile.

It’s a scenario many of us have faced: you’ve got a beautiful product image paired with a compelling description, and on desktop, it looks perfect. But then you check it on your phone, and suddenly there’s this awkward, unnecessary space – a "gap" – separating your image from its accompanying text. It just throws off the whole visual flow, doesn't it?

That’s exactly what one of our community members, JustinasR, ran into. They were trying to reduce the gap between a text card and an image on their mobile site, specifically within what looked like a collection or featured product section. The standard theme settings weren't cutting it, and they reached out for some CSS magic. Take a look at what they were dealing with:

See that red-marked area? That's the offender! Luckily, the Shopify community is full of brilliant minds, and two experts, Moeed and Steve_TopNewYork, quickly jumped in with some excellent solutions. What's interesting is how their solutions, while targeting the same problem, used slightly different CSS selectors, which really highlights how important it is to identify the correct class names for your specific theme and section.

Understanding the "Why" Behind the Gap

Before we dive into the fixes, let's quickly touch on why these gaps appear. Most Shopify themes are designed with default padding and margins to ensure good readability and visual separation on various screen sizes. When elements stack on mobile, these default spacings can sometimes combine or apply in ways that create unintended large gaps, especially between elements that were side-by-side on desktop.

The Fixes: Community-Approved CSS Solutions

Both Moeed and Steve offered solid CSS snippets. The key here is applying CSS that specifically targets the mobile view (using @media queries) and overrides the default spacing for the relevant elements.

Solution 1: Targeting .collection-featured-item (Moeed's Approach)

Moeed's solution is great for sections that use class names like .collection-featured-item. This is a common pattern in many Shopify themes for displaying collections or featured products.

Here’s how to implement Moeed’s fix:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your current theme and click Actions > Edit Code. (Pro Tip: Always duplicate your theme before editing code! It's a lifesaver if something goes wrong.)
4. In the file editor, find the theme.liquid file.
5. Scroll to the very bottom of the file and add the following code right above the tag.

This code tells your browser: "When the screen width is 767 pixels or less (i.e., on most mobile devices), set the bottom padding of the text info and the top margin of the image to zero." The !important tag ensures that these styles override any conflicting default styles in your theme.

And here’s a look at the "after" from Moeed, showing a much cleaner, tighter layout:

Solution 2: Targeting .image-with-text Sections (Steve's Approach)

Steve_TopNewYork offered an alternative, which is fantastic because different themes, or even different sections within the same theme, might use different class names. Steve's code targets elements with .image-with-text__content and .image-with-text__media, which are very common class names for Shopify's "Image with Text" sections.

To implement Steve’s fix:

1. Follow steps 1-3 from Moeed's instructions (Online Store > Themes > Edit Code).
2. Instead of theme.liquid, look for your theme’s main CSS file. This is often named base.css, theme.css, or something similar, usually found under the "Assets" folder.
3. Add the following CSS to the bottom of that file:

@media screen and (max-width: 749px) {
.image-with-text__content {
padding-bottom: 0 !important;
}

.image-with-text__media {
margin-top: 0 !important;
}
}

Steve also provided a useful follow-up for cases where the gap might still linger, especially if your layout uses CSS Grid properties:

@media screen and (max-width: 749px) {
.image-with-text__grid {
gap: 0 !important;
row-gap: 0 !important;
}
}

Adding this second snippet will target the overall grid container (.image-with-text__grid) and explicitly set its gap and row-gap properties to zero, ensuring no space is left between grid items on mobile.

Which Solution is Right for You?

The main difference between Moeed's and Steve's solutions lies in the CSS class names they target (e.g., .collection-featured-item vs. .image-with-text__content). This means you might need to use your browser's developer tools (right-click > Inspect) to identify the exact class names used by the image and text blocks in your specific theme section. Look for classes associated with padding, margin, or gap properties.

Both solutions use a @media screen and (max-width: ...px) query. Moeed used 767px, while Steve used 749px. These values define the breakpoint at which the CSS applies. Most themes consider anything below 768px or 750px as a mobile view, so either should work effectively, but you can adjust this value to match your theme's specific breakpoints if needed.

Remember, making these small CSS tweaks can dramatically improve the mobile experience for your customers. A well-designed, seamless mobile layout isn't just about aesthetics; it directly impacts conversion rates and how professional your brand appears. If you're just starting your journey with an online store, or thinking about moving to a more robust platform, consider giving Shopify a try. Its flexibility, combined with a supportive community, makes it a powerful choice for merchants looking to grow.

Don't be afraid to experiment (always with a backup!), and don't hesitate to lean on the incredible Shopify community when you hit a snag. Happy customizing!