Social Icon

[Deoxes]

Hello, community

Have a question, who can help me with the code, I will show in the picture:

I wanna move social icons to follow us.

Web: homeda.co.uk

Psw: picture

Theme: dawn

Thanks for the help.

[PageFly-Kate]

Hi @Deoxes 

I'm Kate from PageFly - Landing Page Builder, I’d like to suggest this idea: 

Step 1: You find class class="footer__list-social list-unstyled list-social" in online store theme 

Step 2: You move the class you just found into the class class="footer-block grid__item"

Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;

This is the result that I tested on your store: https://imgur.com/a/fFFK0SN

[Deoxes]

@PageFly-Kate I will wait maybe someone gives me a better solution.

It's not nice, thanks for trying to help me.

[PageFly-Kate]

Hi @Deoxes 

I’m sorry to hear that. Please give it a try with this new solution:

Step 1: You find class class="footer__list-social list-unstyled list-social" in online store theme 

Step 2: You move the class you just found into the class class="footer-block grid__item"

Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important; and margin: -1rem !important;

This is the result that I tested on your store: https://imgur.com/a/9Zw8q9c

[Deoxes]

@PageFly-Kate cant find this step: Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;

[Deoxes]

@PageFly-Kate cant find this step: Step3: Then you change the CSS property of the .footer__list-social class to justify-content: start !important;

[PageFly-Kate]

Hi @Deoxes 

.footer__list-social is in the file homeda.css : https://imgur.com/a/oyi7beS

[Deoxes]

@PageFly-Kate 

Added like you told me:

And looks like : 

[PageFly-Kate]

Hi @Deoxes 

You must expect all the list of social icons into the footer-block grid__item class

Can you let me login to your store edit code and i will fix it for you

[Deoxes]

@PageFly-Kate  better will be if I add myself because if I need remove it, I will do it, if I don't do myself, I need ask one more time to community it will be better if I do it myself, thanks

[PageFly-Kate]

Hi @Deoxes 

I’m sorry to hear that. Please give it a try with this solution: 

You have found the correct class of it, but the position is not correct, so I have an updated image where the item list is located for your reference.

https://imgur.com/a/Th8nVHG

[Deoxes]

@PageFly-Kate  Because I'm working on a duplicate and now running the original theme. Ok maybe I will try tomorrow today need to go, thanks for the help.

[PageFly-Kate]

Hi @Deoxes 

Sure, I’m happy to help you

[Deoxes]

@PageFly-Kate  You can go check now, I have made how you told me, and happens like that.

[Deoxes]

@PageFly-Kate Or maybe it's can be just I don't understand you, please explain everything step by step in simple language, because I don't understand what you write me, where and what I need to change because I changed what you tell me but it's nothing happening. to me.

[Deoxes]

@PageFly-Kate I publish my normal theme because I broke last theme to trying fix it, I will wait maybe someone helps me because I don't understand how you telling me to fix it, thanks. for the help.

[Deoxes]

@PageFly-Victor  

Maybe can you better explain how I can fix it?

[PageFly-Victor]

Hi @Deoxes,

This is Victor from PageFly - Shopify page builder app, thank you for mentioning me.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag </body>

<style>
@media screen and (min-width: 980px){
ul.footer__list-social.list-unstyled.list-social {
    margin-left: 770px;
    position: relative;
    bottom: 300px;
}
}
</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[Deoxes]

@PageFly-Victor 

Yes thanks it's works, but when you moving the window size it's not working:

I think I need maybe to do like the top gives me the solution, but it's not explained clearly.

Maybe can you read the above solution and give me step by step what I need to do.

Thanks

[PageFly-Victor · Accepted solution]

Help me add this code to flie theme.liquid, In the code there is a script tag I use to move the icon below the text and the CSS code has a tag style that can style it to customize the position of the icon.

<script>
const interval=setInterval(()=>{
const social=document.querySelector('.footer__list-social')
if(social){
clearInterval(interval)
document.querySelector('.footer-block.grid__item:last-child').appendChild(social)
}
},1)
setTimeout(()=>{
clearInterval(interval)
},10000)
</script>

<style>
ul.footer__list-social.list-unstyled.list-social {
display: flex;
justify-content: start !important;
}
</style>