Jump to content

Badges are stacking not side by side

Recommended Posts

  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

a.bark-widget {
    display: flex !important;
    width: 40% !important;
    flex-direction: row !important;
}

 

Edited by tuanphan

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
  • 1 year later...
On 6/30/2021 at 1:08 AM, simonanthony said:

I'm having the same issue on my site: www.simonanthonyphoto.com

The two badges are on my site footer and I don't know how to put them side by side instead of stacking. Can anyone help?

Hi. It looks like you solved this?

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
  • 1 year later...

Hi, I tried what was suggested above, but it won't work for me. I'm trying to create a row (horizontal not vertical) of clickable badges at the bottom of my home page. Can you help me? I am able to paste the HTML for the badges into the code block on Squarespace, but they end up being stacked vertically. Thank you! 

Link to comment
15 hours ago, nyarttherapy said:

Hi, I tried what was suggested above, but it won't work for me. I'm trying to create a row (horizontal not vertical) of clickable badges at the bottom of my home page. Can you help me? I am able to paste the HTML for the badges into the code block on Squarespace, but they end up being stacked vertically. Thank you! 

What is your site url? Which HTML code did you add?

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

My website is https://www.nyarttherapy.com/

and I added to Home > Design > Custom CSS:

a.bark-widget {
    display: flex !important;
    width: 40% !important;
    flex-direction: row !important;
}

and then on the block on my homepage that I wanted to add the badges, I selected code and this: 

<!-- Professional verification provided by Psychology Today -->
<a href="https://www.psychologytoday.com/profile/230708" class="sx-verified-seal"></a>
<script type="text/javascript" src="https://member.psychologytoday.com/verified-seal.js" data-badge="13" data-id="230708" data-code="aHR0cHM6Ly93d3cucHN5Y2hvbG9neXRvZGF5LmNvbS9hcGkvdmVyaWZpZWQtc2VhbC9zZWFscy9bQkFER0VdL3Byb2ZpbGUvW1BST0ZJTEVfSURdP2NhbGxiYWNrPXN4Y2FsbGJhY2s="></script>
<!-- End Verification -->

Both badges I tried appeared, but they stacked vertically instead of side by side. Ideally I want it to look like this (see photo below). I deleted them from the site currently until I could get it right. 

Thank you!! 

image.thumb.png.6f13c36e4f66862e1bd33cc40d8cdf2d.png

Link to comment
On 9/28/2022 at 6:56 PM, nyarttherapy said:

My website is https://www.nyarttherapy.com/

and I added to Home > Design > Custom CSS:

a.bark-widget {
    display: flex !important;
    width: 40% !important;
    flex-direction: row !important;
}

and then on the block on my homepage that I wanted to add the badges, I selected code and this: 

<!-- Professional verification provided by Psychology Today -->
<a href="https://www.psychologytoday.com/profile/230708" class="sx-verified-seal"></a>
<script type="text/javascript" src="https://member.psychologytoday.com/verified-seal.js" data-badge="13" data-id="230708" data-code="aHR0cHM6Ly93d3cucHN5Y2hvbG9neXRvZGF5LmNvbS9hcGkvdmVyaWZpZWQtc2VhbC9zZWFscy9bQkFER0VdL3Byb2ZpbGUvW1BST0ZJTEVfSURdP2NhbGxiYWNrPXN4Y2FsbGJhY2s="></script>
<!-- End Verification -->

Both badges I tried appeared, but they stacked vertically instead of side by side. Ideally I want it to look like this (see photo below). I deleted them from the site currently until I could get it right. 

Thank you!! 

image.thumb.png.6f13c36e4f66862e1bd33cc40d8cdf2d.png

Which page are you referring to? I don't see badges on homepage

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
On 9/30/2022 at 12:37 PM, nyarttherapy said:

I deleted them because I couldn't get it to look right. Want me to try again?

You need to add it, then we can check easier

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
On 10/5/2022 at 7:51 PM, nyarttherapy said:

Thanks for your help with this! I just added the badges to my website: https://www.nyarttherapy.com/

I tried adding  to Home > Design > Custom CSS:

a.bark-widget {
    display: flex !important;
    width: 40% !important;
    flex-direction: row !important;
}

I would like for the badges to be horizontal (side by side) instead of one on top of the other. I would also like to add more eventually. 

 

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1664972877584_11873>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

image.thumb.png.e8929db9b48331489a64dcefed3541cb.png

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
  • 3 weeks later...

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.