antipodeanco Posted December 6, 2021 Share Posted December 6, 2021 Site URL: https://www.antipodeanco.com/ Hi, I was looking to add payment icons to the footer of my homepage so my customer's can see which type of payments are be accepted on my website e.g. Visa, Mastercard ( I am currently registered with Stripe). Can anybody help? Thanks! Link to comment
creedon Posted December 6, 2021 Share Posted December 6, 2021 Please see the following. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
andymallinsphotography Posted January 28, 2022 Share Posted January 28, 2022 Hi, I have added this to my footer on my site https://andymallinsphotography.com and it looks great, the only issue is that it doesn't center like all the other blocks do when viewing on mobile, I have the following in my CSS code which centers everything else without issue. Any guidance on where I might be going wrong would be greatly appreciated. @media screen and (max-width:767px) { footer#footer-sections * { text-align: center !important; } Link to comment
creedon Posted January 29, 2022 Share Posted January 29, 2022 5 hours ago, andymallinsphotography said: the only issue is that it doesn't center like all the other blocks do when viewing on mobile, Change the horizontal alignment for the section to center. Add the following to Design > Custom CSS. #twc-payment-processors { flex-wrap : nowrap; justify-content : center; } Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
andymallinsphotography Posted January 29, 2022 Share Posted January 29, 2022 8 hours ago, creedon said: Change the horizontal alignment for the section to center. Add the following to Design > Custom CSS. #twc-payment-processors { flex-wrap : nowrap; justify-content : center; } Let us know how it goes. That works an absolute treat, thanks so much! Are you planning on adding another ICONs such as PayPal? Link to comment
creedon Posted January 29, 2022 Share Posted January 29, 2022 12 hours ago, andymallinsphotography said: Are you planning on adding another ICONs such as PayPal? When I created the code I went looking for official PayPal SVG files but sadly they appear to be stuck in the early 2000's with their official media offerings ( PNGs ). I will only use official SVGs provided by their companies. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
andymallinsphotography Posted January 29, 2022 Share Posted January 29, 2022 1 minute ago, creedon said: When I created the code I went looking for official PayPal SVG files but sadly they appear to be stuck in the early 2000's with their official media offerings ( PNGs ). I will only use official SVGs provided by their companies. Typical PayPal! Appreciate you coming back to me, have one last question promise! Here in the UK after pay is called Clearpay, do you have any plans to add this at any point? Appreciate your help so far its been a great help. Link to comment
creedon Posted January 29, 2022 Share Posted January 29, 2022 18 minutes ago, andymallinsphotography said: Clearpay, do you have any plans to add this at any point? Appreciate your help so far its been a great help. I'll see if I can find official Clearpay SVGs! andymallinsphotography 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted January 30, 2022 Share Posted January 30, 2022 @andymallinsphotography Please revisit the thread mentioned in my December 5, 2021 post earlier in this thread. I think you'll be pleased! 🙂 I was able to add Clearpay. I think the icons were available to me when I first created the code but I didn't have an international focus at the time. I was able to find a kind of official PayPal icon. Not what I'm used to but it is from PP. All the others provided a media page of some kind with some guidance on how to use their icons. The single PP icon I found was buried in a PP app developers page. Not ideal but hey, I guess my code could be considered an app of kinds! 🙂 Let us know how it goes. andymallinsphotography 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
andymallinsphotography Posted January 30, 2022 Share Posted January 30, 2022 8 hours ago, creedon said: @andymallinsphotography Please revisit the thread mentioned in my December 5, 2021 post earlier in this thread. I think you'll be pleased! 🙂 I was able to add Clearpay. I think the icons were available to me when I first created the code but I didn't have an international focus at the time. I was able to find a kind of official PayPal icon. Not what I'm used to but it is from PP. All the others provided a media page of some kind with some guidance on how to use their icons. The single PP icon I found was buried in a PP app developers page. Not ideal but hey, I guess my code could be considered an app of kinds! 🙂 Let us know how it goes. Hi, many thanks for adding these! For some reason the ICONs for Clearpay are not obeying "none" so they all appear for both the badge and lockup although the ordering works, for now I've manually removed all bar the mint badge so if displaying fine 🙂 creedon 1 Link to comment
creedon Posted January 30, 2022 Share Posted January 30, 2022 6 hours ago, andymallinsphotography said: For some reason the ICONs for Clearpay are not obeying "none" so they all appear for both the badge and lockup Sounds like a bug! Thank you for the report. andymallinsphotography 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
failbetter Posted March 17, 2022 Share Posted March 17, 2022 On 1/29/2022 at 1:46 AM, creedon said: Change the horizontal alignment for the section to center. Add the following to Design > Custom CSS. #twc-payment-processors { flex-wrap : nowrap; justify-content : center; } Let us know how it goes. Hi @creedon I am trying to do the same with a logo in the footer of my site...Not sure why it's being a bit of a pain. #block-yui_3_17_2_1_1647446956387_11985 { flex-wrap : nowrap !important; justify-content : center!important; } Is it because it's in the footer? I tried centering with spacer blocks but I've coded them to not be seen on mobile because it works better for rest of site. /* remove spacer block mobile */ @media screen and (max-width:767px) { .spacer-block-id { display: none; } } 😬 Link to comment
tuanphan Posted March 17, 2022 Share Posted March 17, 2022 6 hours ago, failbetter said: Hi @creedon I am trying to do the same with a logo in the footer of my site...Not sure why it's being a bit of a pain. #block-yui_3_17_2_1_1647446956387_11985 { flex-wrap : nowrap !important; justify-content : center!important; } Is it because it's in the footer? I tried centering with spacer blocks but I've coded them to not be seen on mobile because it works better for rest of site. /* remove spacer block mobile */ @media screen and (max-width:767px) { .spacer-block-id { display: none; } } 😬 What is your site url? creedon 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
failbetter Posted March 21, 2022 Share Posted March 21, 2022 its www.colettesmith.com Link to comment
creedon Posted March 21, 2022 Share Posted March 21, 2022 @failbetter Add the following to Design > Custom CSS. [data-section-id="61f11b89e3bacf64deef4b4d"] .sqs-layout > .sqs-row > .sqs-col-12 .sqs-row .sqs-col-12 > .sqs-block-image { margin-left : auto; margin-right : auto; } This is for v7.1 and specific to the poster's need. This is a bit of a tortured selector and is fragile in that it will break if any of the elements of that section are edited. Another way to go might be to use spacers but then turn them on/off with media queries as needed for that specific situation. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
failbetter Posted March 22, 2022 Share Posted March 22, 2022 Thanks @creedon I have put spacer blocks in which works fine for desktop, just still cant get it to be centered in mobile. Even if I don't hide space blocks it still pushes itself to the left. Link to comment
creedon Posted March 22, 2022 Share Posted March 22, 2022 35 minutes ago, failbetter said: I have put spacer blocks in which works fine for desktop, just still cant get it to be centered in mobile. Even if I don't hide space blocks it still pushes itself to the left. Keep the spacers. Remove or comment out my previous code. Remove or comment out the following ruleset. #block-yui_3_17_2_1_1647446956387_11985 { flex-wrap: nowrap !important; justify-content: center !important } Change the following ruleset, make a copy somewhere, from... #block-yui_3_17_2_1_1647446956387_11985 { max-width : 150px; text-align : center; } ...to... #block-yui_3_17_2_1_1647446956387_11985 { max-width : 150px; margin-left : auto; margin-right : auto; } Let us know how it goes. failbetter 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
failbetter Posted March 23, 2022 Share Posted March 23, 2022 @creedon That is what I was trying to figure out! worked a treat thank you!!! creedon 1 Link to comment
LALtd Posted October 27, 2022 Share Posted October 27, 2022 Hi there, I'm trying to add Stripe-accepted payment methods so Google Merchant Centre doesnt block me! They've said I need to add to footer accepted payment methods. I have tried to use this site and the code it gives me doesn't work! https://www.merchantequip.com/information-center/credit-card-logos/ Here's my site: https://lateafternoon.co.uk/ I have no coding ability but can copy and paste into Advanced > CSS etc. All help greatly appreciated! Thanks Link to comment
paul2009 Posted October 27, 2022 Share Posted October 27, 2022 2 hours ago, LALtd said: I have tried to use this site and the code it gives me doesn't work The code that it provides is HTML. You should add it to a Code Block. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment