Badges are stacking not side by side

Site URL: https://www.philtographie.com/

I have added two badges to the top of my page (using two different injection codes). But they are stacking on top of each other rather than side by side. Does anyone know how to make the go side by side?

Add to Home > Design > Custom CSS

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

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?

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?

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! 

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?

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

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

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

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

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

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. 

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

Thanks so much for your help! This worked! 

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.

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!

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.

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

Thanks!  This worked!