How can I align trust badges on the same line on desktop?

Store Design
1

Hey there,

Could you guys help me out getting this flex container to make sure the trust badges are on the same line? At least for the desktop?

Like this:

s1.png
s1.png901×333 16.8 KB

Could you help me out there :)? Thank you very much!

Site: click me

Passoword: siesoh1

2

@itsolidude12
Hello,

.trustbadge-wrapper .ultimate-badges {
	width: 62%;
	position: absolute;
	right: 0;
}
.trustbadge-wrapper .product-block {
	width: 29%;
	display: block;
	float: left;
}
.trustbadge-wrapper {
	position: relative;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

oscprofessional_0-1660724215843.png
oscprofessional_0-1660724215843.png1605×866 213 KB

This Solution Its Useful so Please Like And Accept the Solution

1 Like
3

Seems to work sort of! It doesnt wrap under the badges when on mobile view tho.

4

@itsolidude12
Hello,

Find Code (old code) 
.trustbadge-wrapper .ultimate-badges {
	width: 62%;
	position: absolute;
	right: 0;
}

Replace Code (New Code)
.trustbadge-wrapper .ultimate-badges {
	width: 70%;
	position: absolute;
	margin: auto;
	bottom: 9px;
	right: 0;
	top: 0;
}

Replace this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

oscprofessional_0-1660804254534.png
oscprofessional_0-1660804254534.png696×782 195 KB

If This Solution Its Useful Please Like and Accept Solution

5

Hi @Itsolidude12

I am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendations.

Go to Online Store > Themes > Edit Code >theme.liquid > paste this code before element

.trustbadge-wrapper{ display: grid !important; grid-template-columns: 130px auto; grid-template-rows: 60px; } .trustbadge-wrapper .product-block.product-block--sales-point:nth-child(1){ width:100% !important } .trustbadge-wrapper .product-block.product-block--sales-point:nth-child(2){ order:3; width:100% !important } .trustbadge-wrapper .ultimate-badges{ order:2; position:static !important; width:100% !important } @media(max-width:767px){ .trustbadge-wrapper{ grid-template-columns: 110px auto; } }

Best Regards;

Richard-pagefly