How Do I aligned social media icons so they display properly on desktop and mobile devices?

[Fantasy]

Hi,

I’ve successfully added social icons to the announcement bar. They look really great on the desktop but are misaligned on mobile. How do I edit the code to have them aligned properly and optimized on all mobile devices? I have been trying to figure this out, but can’t seem to wrap my brain around it. Any assistance would be greatly appreciated. By the way, I’m using the Dawn theme.

Here is the code:

Goes in the announcement bar liquid file

{%- if settings.social_twitter_link != blank -%}

• {%- render ‘icon-twitter’ -%}

  {{ ‘general.social.links.twitter’ | t }}

{%- endif -%}

{%- if settings.social_facebook_link != blank -%}

• {%- render ‘icon-facebook’ -%}

  {{ ‘general.social.links.facebook’ | t }}

{%- endif -%}

{%- if settings.social_pinterest_link != blank -%}

• {%- render ‘icon-pinterest’ -%}

  {{ ‘general.social.links.pinterest’ | t }}

{%- endif -%}

{%- if settings.social_instagram_link != blank -%}

• {%- render ‘icon-instagram’ -%}

  {{ ‘general.social.links.instagram’ | t }}

{%- endif -%}

{%- if settings.social_tiktok_link != blank -%}

• {%- render ‘icon-tiktok’ -%}

  {{ ‘general.social.links.tiktok’ | t }}

{%- endif -%}

{%- if settings.social_tumblr_link != blank -%}

• {%- render ‘icon-tumblr’ -%}

  {{ ‘general.social.links.tumblr’ | t }}

{%- endif -%}

{%- if settings.social_snapchat_link != blank -%}

• {%- render ‘icon-snapchat’ -%}

  {{ ‘general.social.links.snapchat’ | t }}

{%- endif -%}

{%- if settings.social_youtube_link != blank -%}

• {%- render ‘icon-youtube’ -%}

  {{ ‘general.social.links.youtube’ | t }}

{%- endif -%}

{%- if settings.social_vimeo_link != blank -%}

• {%- render ‘icon-vimeo’ -%}

  {{ ‘general.social.links.vimeo’ | t }}

{%- endif -%}

Goes in base.css file

.announcement-bar.color-accent-1.gradient {

display: flex !important;

justify-content: space-between !important;

}

This code reduces the height of the announcement bar

ul.footer__list-social.list-unstyled.list-social {
float: right;
width: 82%;
}
.announcement-bar.color-accent-1.gradient {
display: flex;
}

[ExpertRookie]

Hi @Fantasy
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

[Fantasy]

Hi, @ExpertRookie

! have temporarily removed the code because of its misalignment on mobile. The code provided is how I added it to my website www.melanincrown.com There isn’t a particular page URL as the icons will be in the announcement bar so they can display sitewide. The store is not password-protected. It is live. Thanks for your reply. I hope you can assist.