Dawn Theme - Multicolumn element image adjustment to fit full width of wrapper

Store Design
, ,
1

Hi folks! I am new to playing with code and am happy to have accomplished a few things but this one I can’t figure out even though it seems super simple. I have added a multicolumn section and I want two images and for them to fit across the screen so that they align with the other images below them. For some reason they are just a bit under even though I chose “full width of column” and “adapt to image”. I have attached a screen shot and you can see they just don’t fill the edges of the container (is that the right word?) You can see the blue rectangle and how it’s not being filled. I’ve tried different images with no luck.

Thankyou for any help!

edit: DAWN 15.2.0

I’ve tried it on a completely fresh install of the theme with no luck.

Screenshot 2025-02-04 at 4.12.05 pm.png
Screenshot 2025-02-04 at 4.12.05 pm.png1814×1664 424 KB

2

Hey @taimanov

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

@taimanov
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

4

Hello @taimanov

This probably happens because the image wrapper has some paddings and margins around it. To remove these, you need to go to Online store → Themes → Edit code. Then open this file: section-multicolumn.css.

Locate this code:

.multicolumn-card-spacing {
  padding-top: 2.5rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

and either remove it or comment it out.

This will remove the spacings around the image wrapper.

I hope this helps.

5

Hi HtmlBurger Thanks! I was sure your advice would work. I found the code and deleted it but no luck. It’s weird.

6

Thanks Moeed but it’s just a test of the theme and for privacy I want to keep the website private. Sorry if that’s not cool I’m new to all this.

7

I understand but I need to have a look at your website to help you out so if you’re unable to share it publicly then feel free to share it in my private messages.

Best Regards,

Moeed

8

Hi @taimanov

Please try to add this code to Custom CSS of that Multiple column section

img {
object-fit: contain;
}
9

Hi Dan, Thanks for the idea. I tried just adding that to the bottom of the section-multicolumn.css. file. Is that what you meant for me to do? Or did you mean for me to do what HtmlBurger said first? And/Or paste it it elsewhere?

10

Hi again Dan,

I was just making my multicolumn images clickable and realised I was using code that you had suggested to someone and it worked perfectly. Thankyou! I’ve now been able to do most things I want to do on the website without any issue. For some reason I can’t figure this simplest of tasks out but I’m probably just doing something small wrong.