How to center payment icons on product template (VENTURE THEME)

Solved
JLbyone
Navigator
281 20 78

Hi there community! Im searching the way to center that payment-container on my product template.. 

paymentcontainer.jpg

here is my url preview: https://y6wng602h2vsdm4a-53196980409.shopifypreview.com 

i found some information on forum, but probably there is some code that prevents new fixes on template. If anyone is able to help me?

 

In advance, thanks to everyone! 

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2298 413 538

This is an accepted solution.

@JLbyone, do this to fix it in 20 seconds:

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

    [id] .payment-icons-product{
    width: 100%;
    margin-top: 20px;

}

[id] .payment-icons{
    display: flex;
    align-items: center;
    justify-content: center
}

[id] .delivery_item_card{
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 0px;
}

@media (max-width: 767px){
    
[id] .delivery_item_card{

    margin-bottom: -20px;
}

}



Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 2 (2)
diego_ezfy
Shopify Partner
2298 413 538

This is an accepted solution.

@JLbyone, do this to fix it in 20 seconds:

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

    [id] .payment-icons-product{
    width: 100%;
    margin-top: 20px;

}

[id] .payment-icons{
    display: flex;
    align-items: center;
    justify-content: center
}

[id] .delivery_item_card{
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 0px;
}

@media (max-width: 767px){
    
[id] .delivery_item_card{

    margin-bottom: -20px;
}

}



Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

JLbyone
Navigator
281 20 78

@diego_ezfy It's perfect sir! thanks so much for your help! just left something, if you can see that container, lose his format (left side below size container) how can i keep that container (guide size) on that side on all devices?

productv2.jpg