Dawn theme: move social media icons located in Announcement Bar

[Bocker503]

 

 

I have coded a little bit and moved my social media icons to the announcement bar. In one version I have managed to have 3 icons stacked on the left hand side 

on both desktop and mobile.

 

On another version I managed to unstack the 3 icons on desktop and they show horizontally BUT on mobile view you can only see the first icon and the rest line up VERTICALLY and are covered up. (I increased the size of the announcement bar to include all 3 icons but obviously the bar was too wide then).

Can I somehow add custom CSS to the announcement bar section to influence the social media icons to line up horizontally or not stack up? 

I have already added custom css to the announcement bar section 

.list-social {
position: absolute;
left: 28px;
color: white;
padding-left: 15px;}

I think that basically put the icons to the left side of the bar and indented them a bit to the right. 

here it is without custom CSS 

 

[AnneLuo]

Hello, @Bocker503 

Can you share your store url?

[Bocker503]

https://sneedabockerscents.com

[AnneLuo · Accepted solution]

You only need to add one line of code

.list-social {
  display: flex;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Bocker503]

MUCH LOVE ❤️ 

[AnneLuo]

Thank you for your reply. I'm glad to hear that the solution worked well for you.
If you require any more help, please don't hesitate to reach out.

[Bocker503]

I do have one more thing I need help with. On desktop view my third image banner is spaced really far from the second image banner. How can I fix this? To have even spacing between all three.