Styling Twitter Feed Horizontally

Site URL: https://mouse-trout-epjy.squarespace.com

Hello, 

I am trying to style a Twitter block to display horizontally like the example below. 

I am using the Squarespace Twitter block and have managed to style it a little with custom CSS but I am having trouble with making it appear horizontally, as it automatically displays as a vertical list. Would I need to style each individual tweet to achieve this?

I have tried with .sqs-block-twitter--tweet-list and sqs.block-twitter--tweet-text-wrapper but nothing has worked so far. 

I have also tried with a Twitter embed code block instead of the SQS widget but couldn't get that to work either. 

Any help or tips would be greatly appreciated, thanks! 

Your site is private. Can you setup password & share url?

spong123

Add to Home > design > Custom CSS

.twitter-block .tweet-list {
    column-count: 2;
}
div#block-yui_3_17_2_1_1597840315726_20085 {
    width: 100%;
}

thank you!! that worked perfectly! 

Is there a way to set the height of the block when you do this - I have used the custom CSS code (thanks!) but it is not formatting correctly as shorter tweets are knocking it out of alignment.

@messery

I had the same issue. I set tweets to 3 on the twitter block settings, and set columns to 3 in the code. Then I kinda messed around with width % and padding in the code and also the width settings of the block and eventually ended up with this. There's still a very faint grey line I can't get rid of though.  

On 9/24/2020 at 8:22 PM, spongebob-smc said:

@messery

 

I had the same issue. I set tweets to 3 on the twitter block settings, and set columns to 3 in the code. Then I kinda messed around with width % and padding in the code and also the width settings of the block and eventually ended up with this. There's still a very faint grey line I can't get rid of though.  

Can you share link to page in screenshot? We can check easier.

https://mouse-trout-epjy.squarespace.com/members

Password: spong123

20 hours ago, spongebob-smc said:

https://mouse-trout-epjy.squarespace.com/members

 

Password: spong123

I don't see Twitter feed??

@tuanphan sorry wrong link

https://mouse-trout-epjy.squarespace.com/

near the bottom of that page 

Hi, I found this thread and have used the code provided (as well as new code for stacking single on mobile), but am wondering if the alignment issue above was ever addressed?  I have my tweets set to show 3, set columns to 3 in the code, and have played around with the width and padding but can't get 3 tweets in a row properly. 

https://bumblebee-chartreuse-kmxn.squarespace.com/

pw: rprednep

9 hours ago, KellenMcG said:

Hi, I found this thread and have used the code provided (as well as new code for stacking single on mobile), but am wondering if the alignment issue above was ever addressed?  I have my tweets set to show 3, set columns to 3 in the code, and have played around with the width and padding but can't get 3 tweets in a row properly. 

https://bumblebee-chartreuse-kmxn.squarespace.com/

pw: rprednep

 

I see 1 twitter item here. Can you add some? We can check easier.

15 hours ago, tuanphan said:

I see 1 twitter item here. Can you add some? We can check easier.

Hello, I have 3 actually...when you're in edit more you can only see 1 for some reason. If you click out of edit mode you can see all 3. There are many tweets on the account so there should be no issue seeing as many as we need. 

Alignment seems to be okay now, but now my client is wondering if we can somehow show the images from the tweets in the feed rather than just the link. Is this possible? 

Hi. 1 item here.

17 hours ago, tuanphan said:

Hi. 1 item here.

Hi, I'm saying that I have it set to show 3 tweets and it shows 3 when I'm in edit mode, but on the "live" site or when I toggle out of edit mode it sometimes only shows one. And alignment is all messed up. AND I want to be able to show images in tweets instead of just a link. Hope that clears it all up. Thanks. 

You can contact Squarespace Customer Care to fix 3 items issue first, then we can check alignment easier.

14 hours ago, tuanphan said:

You can contact Squarespace Customer Care to fix 3 items issue first, then we can check alignment easier.

Hi, can you first tell me if it's possible to show the images from tweets instead of just a link? If it's not, then my client will remove the Twitter feed entirely so I won't want to spend time trying to connect ./support. Thanks. 

I'm not sure. if the block doesn't show, you can use some free plugin, eg this free Twitter feed widget.