Dawn theme - Multicolumn element image adjustment

Store Design
1

Hi folks! I’m currently working with the Dawn theme and I’m attempting to resize the images contained in the standard Multicolumn element of the home page. Specifically, I’m looking to make the displayed images much smaller.

I think I’m in the right place - I found a section of the multicolumn.liquid code that looks promising. I messed around with a few of the variables that look like sizes, but no changes showed in my code preview. Any help deciphering this code would be much appreciated!

Here’s what I was looking at, I might not even be in the right place!

{%- for block in section.blocks -%}
<li class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}" {{ block.shopify_attributes }}>
<div class="multicolumn-card">
{%- 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 %}>
<img
srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
{%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
{{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
src="{{ block.settings.image | img_url: '550x' }}"
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)"
alt="{{ block.settings.image.alt }}"
height="{{ block.settings.image.height }}"
width="{{ block.settings.image.width }}"
loading="lazy"
>
</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 -%}
</div>
</div>
</li>
{%- endfor -%}
1 Like
2

@kyn

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

4

Hi @kyn ,

It only needs to be changed with the CSS code, so please send your site and if your site is password protected, please send me the password. I will check it.

5

Ahh thank you, so I was looking in the wrong place entirely! I’ve spent a few hours poking at the “section-multicolumn.css” asset and haven’t made too much progress.

Here’s a preview link to the store, you can find the one (enormous!) example image about halfway down. Ideally, I’d like to make them tiny - maybe 50x50px? Just kind of struggling with figuring out which variables to mess with here.

https://8gv7nmp7hrkyomqh-60875014358.shopifypreview.com

Thanks so much for any direction you can provide!

6

Hi @kyn ,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-list__item .media--adapt {
	padding-bottom: 15% !important;
}
.multicolumn-list__item .media--adapt img{
	width: 64px !important;
    height: auto !important;
}

Hope it helps!

2 Likes
7

It worked perfectly, thank you so much! (Looks like this was marked as your 250th solution - thank you for helping so many folks out!) I really appreciate your time. Have a great week!

2 Likes
8

Hi @kyn ,

If you have any further questions, you can contact me.
Happy to help you.

9

This works for the first multicolumn on the page.

how do I use this code so I can apply it to the second or third multicolumn but not the first multicolumn on the page? Thanks.

10

Hi! I have tried this, but how is it possible to center the image?
(justify content etc. doesn’t work)

thank you