Solved

How to make Multicolumn full width -Dawn theme

JeroenH
Tourist
10 0 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? 

Accepted Solution (1)

LitCommerce
Astronaut
2860 684 728

This is an accepted solution.

Hi @JeroenH,

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

Screenshot.png

Hope it helps!

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 6 (6)

LitCommerce
Astronaut
2860 684 728

This is an accepted solution.

Hi @JeroenH,

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

Screenshot.png

Hope it helps!

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
JeroenH
Tourist
10 0 1

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!

LitCommerce
Astronaut
2860 684 728

Hi @JeroenH,

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
JeroenH
Tourist
10 0 1

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/c/shopify-design/dawn-theme-multicolumns/td-p/1689569. That worked well, but I don't manage to combine this with a zoom effect on hover.



 

jaimeo78
Visitor
1 0 0

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 %}
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
<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 %}>
{%- 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'
}}
<div class="color-overlay"></div>
</div>
</div>
{%- endif -%}
<div class="multicolumn-card__info">
{%- if block.settings.title != blank -%}
<h3>{{ block.settings.title | escape }}</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte">{{ block.settings.text }}</div>
{%- endif -%}
{%- if block.settings.link_label != blank -%}
<a class="link animate-arrow" {% if block.settings.link == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.link }}"{% endif %}>{{ block.settings.link_label | escape }}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a>
{%- endif -%}
</div>
</div>

mohitk
Visitor
1 0 0

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