How can I make an image full width in the info tabs section on Shopify plus?

Store Design
, , ,

Topic summary

Goal: Make an SVG image span full width in the “info tabs” section of the Combine theme on Shopify Plus, removing the left gap.

Progress: After clarifying the correct preview link, a CSS approach was proposed to achieve edge-to-edge layout.

Desktop solution (>=768px):

  • Apply margin-left: calc(50% - 50vw) to the info tabs container to pull the section to the viewport edge.
  • Set the panels element to width: 50vw to balance the layout.

Mobile solution (<=767px):

  • Set the panels element to width: 100vw.
  • Use horizontal margins of calc(50% - 50vw) to align and span the viewport.

Notes and caveats:

  • The CSS targets all sections of this type; more specific selectors may be needed.
  • Works when images are on the left side; layout may vary otherwise.
  • Ultra-wide monitors may produce undesirable full-width visuals.

Key terms:

  • Media queries control styles at specific viewport widths.
  • vw (viewport width) units size elements relative to the browser window.

Status: Actionable CSS provided for desktop and mobile; no confirmed resolution yet.

Summarized with AI on January 3. AI used: gpt-5.
6

I guess it’s a section like this one: https://moodiostudio.com/#shopify-section-template–15705531908301__166266065378da2b75

You may try CSS code like this:

@media (min-width:768px) {
  .info-tabs {
    margin-left: calc(50% - 50vw);
  }
  
  .info-tabs_panels {
    width: 50vw;
  }
}

tim_0-1708488677353.png
tim_0-1708488677353.png2026×1415 229 KB

However:

The code above would apply to all sections of this type, so may require better targeting;

Should work when images are on the left (because margin-left);

Also wanted to warn that there are people with large and ultra-wide monitors where full-blown things like this may not look pretty, but it’s hard to suggest anything without seeing the actual image:

tim_2-1708489012996.png
tim_2-1708489012996.png1730×1659 321 KB

1 Like