How to make Multicolumn full width -Dawn theme

Store Design

Topic summary

Goal: make the Dawn theme’s Multicolumn section full width after enabling desktop swipe per a YouTube tutorial.

  • Solution provided: remove the ‘page-width’ class in multicolumn.liquid. A screenshot indicated where to delete it. The original poster confirmed this made the section full width.

  • Follow-up requests/issues:

    • Desire for an “infinite scroll” (looping/continuous carousel) so the slider cycles from last back to first. No code solution was posted; the helper requested site access and received credentials to investigate.
    • Need to combine title/link overlays with a zoom-on-hover effect. This remains unresolved pending review.
    • Another user’s mouseover card-overlay isn’t full width after making the section full width. They shared their store URL, password, and a code snippet from the image wrapper; no fix posted yet.
    • Report that removing ‘page-width’ worked on desktop but not on mobile. No resolution provided.

  • Notes: The referenced video covers swipe behavior but not full-width configuration. The screenshot and code snippets are central to understanding the changes.

Status: Partially resolved (full width via removing ‘page-width’); other issues are open.

Summarized with AI on December 31. AI used: gpt-5.
1

Hi everyone,

I changed multicolumn to have it slide on desktop by following this video https://www.youtube.com/watch?v=szkhN249qBY&t=612s

Now that worked great, but now I want to make the multicolumn section full width

Any tips?

2

Hi @JeroenH ,

Please go to multicolumn.liquid file and remove code ‘page-width’ here:

Screenshot.png
Screenshot.png988×778 40.9 KB

Hope it helps!

1 Like
3

That did the trick indeed. Now I was wondering if there is an “infinite scroll” possibility on the multicolumn. now it stops after the last column but rather have it continue with the first one after it showed the last picture. Thanks in advance!

4

Hi @JeroenH ,

Please send your site and if your site is password protected, please send me the password. I will check it.

5

Just sent you the login details. On a side, i noticed your solution on having a title and link inside the pictures here https://community.shopify.com/topic/1689569. That worked well, but I don’t manage to combine this with a zoom effect on hover.

6

Hi, this solution helped me alot, I am using the dawn theme as well and wanted to make the multicolumn section full width.. i do have a mouseover card-overlay now that is not the correct width.. how do i make this full screen as well? my site is https://colosseumusa.myshopify.com/

Password is colo2400

and the code i think will need to change is in this section - im not sure what i need to change to make it full width like the columns

{%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == ‘adapt’ or section.settings.image_ratio == ‘circle’ %}
{% assign spaced_image = true %}
{% endif %}

{%- capture sizes -%}(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %}, (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %}, calc(100vw - 30px){%- endcapture -%} {{ block.settings.image | image_url: width: 1420 | image_tag: loading: 'lazy', sizes: sizes, widths: '275, 550, 710, 1420', class: 'multicolumn-card__image' }}
{%- endif -%}
{%- if block.settings.title != blank -%}

{{ block.settings.title | escape }}

{%- endif -%} {%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%} {%- if block.settings.link_label != blank -%} {{ block.settings.link_label | escape }} {% render 'icon-arrow' %} {%- endif -%}
7

removed code page-width but it is only working for desktop not for mobile

8

From the video https://www.youtube.com/watch?v=szkhN249qBY&t=612s, it looks like you’ve added swipe functionality to your multi-column section on Shopify’s Dawn theme. Now you want to make that section full width.

While the video focuses on making the multi-column section swipe on desktop, there isn’t specific guidance on making it full width.