Centering an image below payment buttons :-)

Solved
Cheiro
Excursionist
30 1 7

Hi, I am going MAD trying to center this image of payment seals below the buttons. Please help!

Store is live at www.theelephant.world

Mant thanks!

Cheiro_0-1618412035428.png

 

KetanKumar
Shopify Partner
16902 1846 6320

This is an accepted solution.

@Cheiro 

sorry for this issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

 

.product-single__meta + img {
    width: auto !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cheiro
Excursionist
30 1 7

That worked! Thanks so much @KetanKumar.

One more thing - how can I limit the size of the image to say 300px width?

KetanKumar
Shopify Partner
16902 1846 6320

@Cheiro 

thanks for update 

yes add parent div on image after you have set 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cheiro
Excursionist
30 1 7

Thanks for the reply @KetanKumar ... However, I have added the parent Div to the image and nothing changed. I then specfied the size in the image code, which worked to reduce the image size, but now the image is not central any more!

<div>
<img src="https://cdn.shopify.com/s/files/1/0551/4271/1461/t/1/assets/PAYMENTS4.png?v=1618430930" style="width:330px"/>
</div>

Cheiro_0-1618592273421.png

 

KetanKumar
Shopify Partner
16902 1846 6320

@Cheiro 

thanks for post 

i can see a proper look

KetanKumar_0-1618637786313.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cheiro
Excursionist
30 1 7

Hi @KetanKumar thanks for this. Yes it appears central some times, but on different screen sizes (and on some product pages) it is just not aligned. I need it to be fixed in the central alignment, whatever device or product. Does that make sense?

KetanKumar
Shopify Partner
16902 1846 6320

@Cheiro 

yes, please share a particular product URL so i will check.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cheiro
Excursionist
30 1 7
Arun_Kumar
Shopify Partner
101 12 25

@Cheiro better you should assign a different class to that img tag, and then do this css to it.

.product-single__meta + img {
    display: inherit;
    max-width: 100% !important;
    margin: 0 auto;
}

Right now, i have used the already given class but it will be better if you can assign a different class to that img tag 

and do remove the below css which you have assigned to the img element. 

    width: 300px !important;
    margin-left: 9% !important;

 

If you think my solution is good, then please Like and Accept the Solution.
Happy To Help You :)