How can I resize images and evenly distribute icons in Dawn theme?

[sisaul]

Hello

I have made some modifications to section-multicolumn.css and now I can’t seem to work out how to resize the image without changing the overall look of the page. I would like the images of the sections to be around 550 px in width but the adapt image doesn’t seem to do the trick.

Another thing is that I would like to make another multicolumn section on the bottom of the page which includes 3 icons with a description. The problem is that the icons aren’t evenly spread out and when trying to add a description below the icon everything a button appears and everything goes even more out of place.
The wanted end result would look like this:

The link to the topic regarding the changes I have made: https://community.shopify.com/post/1442284

The link to my page: https://ed8xamxzhxawj0hw-60215460006.shopifypreview.com

Could somebody please help me out?

Thank you in advance!

[diego_ezfy]

@sisaul

To change the size of the images:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

@media (min-width: 750px){
    [id] .media{
    position: relative;
}

[id] .media > img{
        max-width: 500px !important;
    left: 50% !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
}
}

You can change the 500px to any width you wish. It will only take effect on desktop devices.

The other issue would be a bit more complex, the quickest way to get that done would be by working alongside a developer to achieve that.

Kind regards,
Diego

[sisaul]

Hi @diego_ezfy

It did make the image smaller but the overall look changed as well. I would like the image corners to still touch one another and the section width to be 2x the width of the images and height the same as the image height.

Do you know how to achieve it?

Thank you in advance

[diego_ezfy]

@sisaul

Technically speaking it’s not possible to reduce the size of the image whilst making the corners touch, in this case you’d need to alter the width of the section altogether:

@media (min-width: 750px){
    .multicolumn-list{
    max-width: 1000px;
    width: 100;
    margin: 0 auto;
}

.multicolumn-list .multicolumn-card__info{
    padding: 40px !important;
}
}

You can change the values as per your wish:

1000px = section width
40px = text padding (top, bottom, left and right)

Kind regards,
Diego

[sisaul]

Hi @diego_ezfy

Thank you so much, it works exactly like I wanted it to!

[sisaul]

Hi @diego_ezfy ,

I have a question regarding the mobile view of the multisection.
Do you know how to display the multisection in that way that the image comes before the text for the 3 sections. Currently it seems to be displaying in the same order that the columns actually are. Is there an easy way to switch some columns around only in the mobile view?

Thank you in advance!