Shopify Pro Tip: Get Your 'Image with Text' Section Full-Width on Desktop

Hey store owners! One of the most common design questions I see pop up in the Shopify community revolves around layout control, especially when you're trying to achieve that sleek, modern, full-width look for certain sections. It's a fantastic way to make your store feel more immersive and professional.

Recently, a fellow merchant, ecom11, sparked a great discussion about making their "Image with text" section stretch across the entire desktop screen, edge-to-edge. They shared an example from their site, www.marencio.com, using what they called the "horizon theme" (likely referring to a modern theme like Dawn or similar). This is a pretty common hurdle, and the community really came through with some actionable advice.

Let's dive into how you can achieve this full-width effect for your "Image with text" sections, pulling insights from the best solutions shared in the thread.

First Steps: Theme Editor Settings (The Foundation)

Before jumping into code, it's always best practice to check your theme's built-in settings. As tim_tairli pointed out in the discussion, the "Image with text" section often has settings specifically for this. You'll want to look for options related to "Gap" and "Size" or "Width."

How to Adjust Section Width in Theme Editor:

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme and click Customize.
3. In the theme editor, navigate to the page where your "Image with text" section is located.
4. Click on the "Image with text" section in the sidebar to open its settings.
5. Look for a setting like "Width" or "Layout." You'll likely see options like "Contained" or "Full." Select "Full" (or "Full Width").
6. While you're there, also check for a "Gap" setting. Some themes allow you to control the spacing around the content directly. Reducing this to zero might help.

This initial step often gets you most of the way there, ensuring the section container itself spans the full width. Here's a visual of what some of those settings might look like:

Eliminating Stubborn Gaps with Custom CSS

Even after setting the section to "Full Width," you might still notice some pesky padding or gaps that prevent the image and text from truly touching the screen's edges. This is where custom CSS comes in handy to override your theme's default styling. Moeed's solution in the thread directly addressed this, pointing out that an internal gap was often the culprit.

Applying Custom CSS to Remove Gaps:

This CSS snippet targets the layout within the section to remove any default spacing, specifically for desktop screens (min-width: 768px).

1. In the theme editor, select your "Image with text" section.
2. Scroll all the way down in the settings panel until you find the "Custom CSS" field for that specific section.
3. Paste the following code into the field:

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

A quick breakdown of this code:

• @media screen and (min-width: 768px): This is a media query, meaning the CSS inside it will only apply to screens that are 768 pixels wide or larger (i.e., most desktops and tablets in landscape mode).
• .layout-panel-flex--row: This is a class name that often controls the internal layout of sections, particularly those using Flexbox (hence "flex--row").
• gap: 0 !important;: This sets the spacing (gap) between elements within that layout to zero. The !important flag ensures that this rule overrides any other conflicting styles your theme might have.

After applying this, you should see your image and text content align much more closely with the screen edges on desktop, giving you that truly full-width appearance. Here's an example of what the result might look like:

Advanced: Desktop Full, Mobile Contained (Conditional CSS)

What if you want your "Image with text" section to be full-width on desktop, but prefer it to be contained with some padding on mobile? This is a great design choice for readability on smaller screens. Tim_tairli also provided a clever solution for this scenario, using a slightly different media query.

Implementing Desktop Full-Bleed, Mobile Contained:

1. First, ensure your section's "Width" setting is set to "Full" in the theme editor (as discussed in the "First Steps" section).
2. Then, in the "Custom CSS" field for that same "Image with text" section, add this code:

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

Why this code works:

• @media (max-width: 750px): This media query targets screens up to 750 pixels wide (typical mobile devices).
• .section--full-width > .custom-section-content: This targets the content area specifically within a section that has been set to full-width.
• grid-column: 2;: This is a bit of a trick! Many modern Shopify themes use CSS Grid for layout. By setting grid-column: 2;, you're essentially telling the content to sit in the second column of a grid, which often corresponds to a padded, contained area within a full-width section. It effectively pulls the content back from the edges on mobile, even though the overall section is "full-width."

Important note from tim_tairli: Make sure to use this code only in the *section's* "Custom CSS" field, not in your theme's global CSS file, to prevent it from accidentally affecting other sections.

As you can see, the Shopify community is a goldmine of practical solutions! By combining your theme's built-in settings with a little targeted custom CSS, you gain incredible control over your store's aesthetics. Whether you need a simple gap adjustment or a more nuanced responsive behavior, these methods empower you to craft the perfect look. If you're thinking about starting your own store and want this level of control over your design, Shopify is an incredibly powerful platform that lets you customize almost anything with a bit of know-how. Don't be afraid to experiment, and always make sure to test your changes on different devices!