Shopify Image with Text Section: Master Full-Width Desktop Layouts (No More Gaps!)

Hey fellow store owners! Let's talk about something that comes up surprisingly often in the Shopify community: getting those 'Image with text' sections to truly stretch across the entire width of your desktop screen. You know, that sleek, modern, edge-to-edge look that just screams professionalism?

Recently, I saw a great discussion pop up in the forums. Our friend ecom11, running on the Horizon theme, asked about making their 'Image with text' section full width on desktop, sharing an example of what they were aiming for:

It's a common design goal, and the community came through with some really helpful insights. Let's break down how you can achieve this polished look for your own Shopify store.

Understanding the Challenge: Theme Settings vs. Custom Code

The core of the problem often lies in how themes handle section width and internal spacing (gaps). While many modern Shopify themes offer 'full width' settings, sometimes there are still stubborn paddings or margins that prevent a truly edge-to-edge display.

The Initial Approach: Theme Editor Settings

One of the first and most crucial steps, as pointed out by community member tim_tairli, is to check your theme's built-in settings. For the 'Image with text' section, you'll often find options like 'Gap' and 'Size' -> 'Width'.

tim_tairli noted that setting the 'Width' option to 'Full' is a great starting point, though it usually applies to all screen widths. This is an important distinction because you might want full width on desktop but a more contained look on mobile. Here's what those settings might look like:

If you set the section 'Width' to 'Full' but want to prevent it from being full-bleed on smaller screens (like mobile), tim_tairli provided a neat CSS snippet:

@media (max-width: 750px) {
  .section--full-width > .custom-section-content {
    grid-column: 2;
  }
}

This code targets screens up to 750 pixels wide and adjusts the grid column of the content within the full-width section, essentially pulling it back from the edges on mobile. Remember, as tim_tairli wisely advises, always add this to the section's 'Custom CSS' setting, not globally, to avoid unintended impacts elsewhere.

Tackling the Stubborn Gaps: Custom CSS for Desktop Perfection

Now, even with the 'Full' width setting, sometimes there are still internal gaps that make your image and text look like they're not quite touching the edges. This is where Moeed, another helpful community member, stepped in with a direct solution.

Moeed observed that often, the image itself *is* full width, but there's a layout gap preventing true edge-to-edge alignment. His solution targets this gap specifically for desktop views. He suggested adding this code to the 'Custom CSS' option of the section:

@media screen and (min-width: 768px) {
.layout-panel-flex--row {
    gap: 0 !important;
}
}

What this CSS does is target the flexbox layout row (.layout-panel-flex--row) specifically on screens 768 pixels wide and larger (i.e., desktop and larger tablets), and sets the gap property to 0. The !important flag ensures this rule overrides any default theme styles. The result is a beautifully aligned, gap-free section:

Your Step-by-Step Guide to a Full-Width 'Image with Text' Section

Let's combine these insights into an actionable plan:

1. Navigate to Your Theme Editor: From your Shopify admin, go to Online Store > Themes > Customize.
2. Select Your 'Image with text' Section: In the theme editor sidebar, click on the specific 'Image with text' section you want to modify.
3. Check Section Width Settings: Look for settings related to 'Layout', 'Width', or 'Size'. Ensure that any 'Width' option is set to 'Full' or 'Container width' (depending on your theme's terminology, 'Full' is usually what you want for edge-to-edge). Also, check for 'Gap' settings and try reducing them if available.
4. Add Custom CSS for Desktop Gap Removal: Scroll down in the section's settings until you find the 'Custom CSS' box. Paste Moeed's code here to eliminate internal gaps on desktop:

   @media screen and (min-width: 768px) {
   .layout-panel-flex--row {
       gap: 0 !important;
   }
   }

5. (Optional) Add Custom CSS for Mobile Responsiveness: If you want the section to be full-width on desktop but not on mobile after setting 'Width' to 'Full', add tim_tairli's code to the same 'Custom CSS' box, underneath Moeed's code:

   @media (max-width: 750px) {
     .section--full-width > .custom-section-content {
       grid-column: 2;
     }
   }

   This will help ensure your mobile layout remains clean and readable.
6. Save Your Changes: Don't forget to hit 'Save' in the top right corner of the theme editor.
7. Test Thoroughly: Always check your changes on various devices (desktop, tablet, mobile) to ensure everything looks as intended and you haven't introduced any unexpected issues.

It's important to remember that while these CSS snippets are quite generic and often work across many themes, slight variations might exist depending on your specific theme's underlying structure. If you run into trouble, inspecting the elements with your browser's developer tools can help identify the exact class names your theme uses for gaps or content wrappers.

The beauty of Shopify, especially when you're building a professional online presence, is the flexibility it offers. With a little custom CSS, you can really fine-tune your storefront's design to match your brand vision perfectly. It's these small, thoughtful touches that elevate a good store to a great one, giving your customers a seamless and engaging browsing experience.