How to display multicolumn logos at the right size? Dawn Theme

Store Design
, ,
1

How to display multicolumn logos at the right size? Dawn Theme

I want all the logos to fill the boxes they are in and for the boxes to be ahref type links to the collection associated with the logo.

I have the original logos and made some re-sized versions of the images at 150px high but they are all over the place. Some are teeny tiny and some are really big. How can I make it so the images scale properly to the boxes they’re in please?

They are already links to their collections. Just need to fix the heights and widths.

The URL is https://fleshandbloodcards.com/

logos.jpg
logos.jpg1453×573 57.3 KB

Would be so nice to get them all a standard box filling size!

2

Hello @chad0x001
Please copy and paste this below code to the following path
online store->actions->assetes->base.css

.multicolumn {
    padding: 5% 0 0;
}
.multicolumn-list__item.center .media--adapt img{
    display: block;
    max-width: 250px;
    max-height: 100%;
    width: auto;
    height: auto;
}

Output

DipenPanchal_0-1678175371717.png
DipenPanchal_0-1678175371717.png1919×973 212 KB

3

Hi @chad0x001 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-multicolumn.css->paste below code at the bottom of the file:

.multicolumn-list {
    align-items: center !important;
}
.multicolumn-list .multicolumn-card__image-wrapper .media {
    padding: 20px 10px !important;
}
.multicolumn-list .multicolumn-card__image-wrapper .media img {
    position: static;
    object-fit: contain;
    transform: none !important;
    max-width: 200px;
    max-height: 45px;
    margin: 0 auto;
}
.multicolumn-list .multicolumn-card__info {
    padding: 0 !important;
}

PageFlyRichard_0-1678199022244.png
PageFlyRichard_0-1678199022244.png1320×848 179 KB

I hope it would help you
Best regards,

Richard | PageFly

4

Will this affect any other multi column items I have on my web site?

is pagefly-richards solution better than yours?

5

Will this affect any other multi column items I have on my web site?

is dipenpanchals solution better than yours?

Can you tell me please, when you inspect source on one of the pages of my site, which box do you click in to change values and see their effects?

6

Hi @chad0x001 ,

If you just want to change it for this section only then you can change my previous code to below code:

#shopify-section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad 
 .multicolumn-list {
    align-items: center !important;
}
#shopify-section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad 
 .multicolumn-list .multicolumn-card__image-wrapper .media {
    padding: 20px 10px !important;
}
#shopify-section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad 
 .multicolumn-list .multicolumn-card__image-wrapper .media img {
    position: static;
    object-fit: contain;
    transform: none !important;
    max-width: 200px;
    max-height: 45px;
    margin: 0 auto;
}
#shopify-section-template--15977344991420__63f378c7-2bc6-4f0f-8672-85dfa85442ad 
 .multicolumn-list .multicolumn-card__info {
    padding: 0 !important;
}

I hope it would help you
Best regards,

Richard | PageFly