Jump to content

Badges are stacking not side by side

Recommended Posts

  • Replies 15
  • Views 838
  • Created
  • Last Reply

Top Posters In This Topic

  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 3 months later...

I am having a similar problem with 2 widgets stacking on top instead of being inline.  I tried the solutions above, but they didn't work, but I am not sure what text for my website should be after block-yui.

The page I"m trying to fix is:

https://www.gundrylab.com/publications

I want the two widgets to appear side by side. Currently they are stacked.

image.png.5e111595c46c7d9db5fc33b34d5e62eb.png

Code I have for this page is as follows.

1. Farnoodian M, Bose D, Khristov V, Susaimanickam PJ, Maddileti S, Mariappan I, Abu-Asab M, Campos M, Villasmil R, Wan Q, Maminishkis A, McGaughey D, Barone F, Gundry RL, Riordon DR, Boheler KR, Sharma R, Bharti K. Cell-Autonomous lipid-handling defects in Stargardt iPSC-derived retinal pigment epithelium cells. **Stem Cell Reports**, 17(11):2438-2450 [PMID: 36306781.][1] 
<a href="https://plu.mx/plum/a/?pmid=36306781" class="plumx-plum-print-popup" data-hide-when-empty="true" data-size="medium"> </a> <div class='altmetric-embed' data-badge-type='donut' data-pmid='36306781'></div>

 

Would I fix it at this level or would I add some code to the Custom CSS?
Thanks!

Link to comment
On 2/11/2023 at 9:43 PM, rebekahg said:

I am having a similar problem with 2 widgets stacking on top instead of being inline.  I tried the solutions above, but they didn't work, but I am not sure what text for my website should be after block-yui.

The page I"m trying to fix is:

https://www.gundrylab.com/publications

I want the two widgets to appear side by side. Currently they are stacked.

image.png.5e111595c46c7d9db5fc33b34d5e62eb.png

Code I have for this page is as follows.

1. Farnoodian M, Bose D, Khristov V, Susaimanickam PJ, Maddileti S, Mariappan I, Abu-Asab M, Campos M, Villasmil R, Wan Q, Maminishkis A, McGaughey D, Barone F, Gundry RL, Riordon DR, Boheler KR, Sharma R, Bharti K. Cell-Autonomous lipid-handling defects in Stargardt iPSC-derived retinal pigment epithelium cells. **Stem Cell Reports**, 17(11):2438-2450 [PMID: 36306781.][1] 
<a href="https://plu.mx/plum/a/?pmid=36306781" class="plumx-plum-print-popup" data-hide-when-empty="true" data-size="medium"> </a> <div class='altmetric-embed' data-badge-type='donut' data-pmid='36306781'></div>

 

Would I fix it at this level or would I add some code to the Custom CSS?
Thanks!

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
.PlumX-Popup, .PlumX-Popup+div {
    width: 30% !important;
    float: left;
}
li:after {
    content: "";
    clear: both;
    display: table;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.