Jump to content

Payment Icons - Home Page

Recommended Posts

  • 1 month later...

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;
}

Screenshot 2022-01-28 at 20.42.50.png

Link to comment
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
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
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

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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 🙂

Link to comment
  • 1 month later...
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
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?

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

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
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 7 months later...

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
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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.