How can I resize a trust badge on the desktop version of my cart page?

Store Design
1

Hi everybody,

I’ve recently added a trust badge on the cart page from admin/setting/files. I copied the URL and I copied the following code on the cart.liquid template just after the buttons code.

Trust Badge

On the mobile version it shows quite well but on the desktop it shows gigantic.

Do you know how to reduce the size of this kind of images but only on desk version?? The store URL is https://thepapayafactory.com/

Many thanks in advance,

Cristian

2

@cristianlbcn

Please add html like the following:

Add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (min-width: 480px){
.cart-trust-badge{max-width: 70%;}
}

Hope this helps.

Thanks!

3

Hi dmwwebartisan,

I followed the steps with both codes but it doesn’t works. I tried to change the % and pixels but not. It still shows huge on desktop version from side to side of the window as you can see.

Captura de pantalla 2020-12-20 a las 19.32.02.png
Captura de pantalla 2020-12-20 a las 19.32.02.png1241×513 140 KB

Cristian

4

@cristianlbcn Add the image using the following HTML

Then add the following CSS at the end of theme.scss file

@media screen and (min-width: 481px) {
    .cart-trust-badge {
        max-height: 50px;
        display: block;
        margin-left: auto;
        margin-top: 15px;
    }
}
5

Hi m_waqas,

Many thanks!! That’s great but if you dont mind it could be possible to show it on the left instead the right position and a little big bigger size.

Many thanks!!

Cristian

6

Use the following code:

@media screen and (min-width: 481px) {
    .cart-trust-badge {
        max-height: 70px;
        display: block;
        margin-top: 15px;
    }
}
7

Hi w_waqas,

That’s perfect!! Many thanks for your help !!!

Cristian

8

Hello. I have built in a section for my trust badge. I use code:

main-product.liquid:

{% if section.settings.trust_badge_icon != blank %}

{% endif %}

at the bottom i have:

“type”: “image_picker”,
“id”: “trust_badge_icon”,
“label”: “Trust Badge Icon”
}

and then in section-main-product.css i have:

.custom-img {
text-align: center;
max-width: 100%;
margin-top: 1rem;
}

but the trust badge exceeds the width of the buy now button. any ideas what i can add so it always keeps the width the same as the buy now button on mobile and desktop. Thanks