Multi Column Sections Suddenly Not Working

Technical Q&A
,

Topic summary

Issue: Images in Multi Column sections are not displaying on a Shopify store page.

Solution Provided: A CSS fix was offered to resolve the display problem:

  • Add .multicolumn-list .media { width: 100%; } to the section’s Custom CSS
  • If adding to Theme settings or stylesheet, use !important flag
  • The original poster confirmed this solution worked

Additional Finding: A potential root cause was identified - duplicate <div> elements with the same media class in the multicolumn.liquid theme file. The suggestion is to compare the theme file against the official Shopify Dawn theme repository and remove the extra div wrapper and its closing tag.

The immediate CSS workaround resolved the issue, though the underlying template duplication may need addressing for a cleaner long-term fix.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Multi Column sections are not showing the images that are uploaded. Please help.

Page with the issue Custom Products – Cufflinks.com

2

This would be fixed by this code added to the “Custom CSS” of this section:

.multicolumn-list .media {
  width: 100%;
}

If you add the code to the “Theme settings” =>“Custom CSS” or stylesheet asset, use !important

.multicolumn-list .media {
  width: 100% !important;
}

Screenshot 2025-10-07 at 1.36.27 AM
Screenshot 2025-10-07 at 1.36.27 AM1756×433 91.6 KB

3

Thank you this worked

1 Like
4

Hi @cufflinks15685

You seem to have an extra line in multicomn section

<div class="media media--transparent media--adapt" style="padding-bottom: 75.0%;">

      
  <div class="media media--transparent media--adapt" style="padding-bottom: 75.0%;">
    <img src

Check your theme sections/multicolumn.liquid and compare with

and remove one

                  <div
                    class="media media--transparent media--{{ section.settings.image_ratio }}"
                    {% if section.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                    {% endif %}
                  >

and matching closing if this is an issue.