Multicolumn Refresh Theme - Column Image Size Change

Ask & Offer
1

Hi guys:) I am trying to make my one image/one column in my multicolumn full size. The same size as the full multicolumn - so that it occupies the full width + height of the screen/multicolumn rather than sitting as a block within that multicolumn.

1 Like
2

Hey @SPHealth

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3
4

Hey @SPHealth,

That’s a great design goal – creating a “breakout” section within a multicolumn layout to add visual rhythm. If I’m understanding correctly, you want one specific column to ignore the standard grid and stretch to the full width of the screen, correct?

The reason this is tricky is that the multicolumn section is coded to contain its children within a set width. To make one child “break out,” you need to override that container’s rules with custom CSS, usually involving viewport width units (vw) and some clever positioning to re-center it.

The general approach looks like this:

  1. Assign a Unique Class: You would need to give the specific column you want to be full-width a unique CSS class (e.g., multicolumn__item--full-width) using the theme editor.

  2. Apply Custom CSS: Then, you would add custom CSS that targets this new class. The core logic often involves code similar to this:

    CSS

    .multicolumn__item--full-width {
  width: 100vw; /* Sets width to 100% of the viewport width */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Please note: This is a conceptual example. The exact code for the Refresh theme can be more complex, especially to ensure it works perfectly on all screen sizes without creating unwanted horizontal scrollbars.

Getting this kind of precise layout adjustment right is my specialty. If you’d like an expert to implement this cleanly and safely for you, you know where to find me.