Dawn Theme - social media icons in header

[AmberWilkinson]

Hi I have two things that have me stumped!

1, I have coded the social media icons in the header on the right hand side - but on mobile view they go horizontal - can I exclude them from mobile view?

2, I have a page that I have embeded you tube clips in a CSS section - how do I centre them on the page?

Thanks so much!

[Moeed]

Hey @AmberWilkinson 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[AmberWilkinson]

www.bonnieanderson.com.au

[Moeed]

Hey @AmberWilkinson 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.header ul.list-unstyled.list-social {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AmberWilkinson]

Thank you!

WORKED!

Do you know how to center the CSS embed you tube clips??

[Moeed]

Hey @AmberWilkinson 

Keep the previous code and add this new code above </style> in the end of theme.liquid file

.section-template--23084724420919__custom_liquid_jkDDpK-padding {
    text-align-last: center !important;
}
.section-template--23084724420919__custom_liquid_b3QBPp-padding {
    text-align-last: center !important;
}
.section-template--23084724420919__custom_liquid_PUBJzj-padding {
    text-align-last: center !important;
}
.section-template--23084724420919__custom_liquid_MMKGMD-padding {
    text-align-last: center !important;
}
.section-template--23084724420919__custom_liquid_JK8FiX-padding {
    text-align-last: center !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AmberWilkinson]

Thank you, I have aded it but is isnt working 😞

[Gracia_Conv]

You can use CSS media queries to hide social media icons on mobile devices by setting display: none; for the appropriate screen sizes.

To center YouTube clips embedded in a CSS section, apply text-align: center; to the container or use margin: 0 auto; on the embedded element itself.

Do you need further guidance on implementing these solutions?