Hello I would like to enlarge the social network icons in the footer on the Spotlight theme? Do you

[Rogoul]

Bonjour
je souhaite agrandir les icônes des réseaux sociaux en pied de page sur le thème Spotlight ?
Avez-vous une solution?

[Made4uo-Ribe · Accepted solution]

Thanks for the info. 

Im not sure how much size you like but you can increase/decrease  the size.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "component-list-social.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.list-social__item .icon {
    height: 5rem;
    width: 5rem;
}

• And Save. 
• Result:
• 

[Rogoul · Accepted solution]

Great, thanks. Works very well 👌

At the same time, is it possible to reduce the spacing between each option in the footer menus on mobile ? The spacing between CONTACT, FAQ, etc. ... is too wide.

[Made4uo-Ribe · Accepted solution]

Try this one. If you like to decrease/increase you can adjust ther sizes. 

Same Instruction.

h2.footer-block__heading.inline-richtext, .footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in,
ul.footer-block__details-content.list-unstyled {
    margin-bottom: 1rem !important;
}
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    margin-top: 1rem;
}
.footer-block.grid__item.scroll-trigger.animate--slide-in {
    margin: 2rem 0;
}

And Save. 

Result:

[Made4uo-Ribe]

Hi @Rogoul 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[Rogoul]

Ok thanks

https://www.gotin.fr/

GOTINSHOP 

[Made4uo-Ribe · Accepted solution]

Thanks for the info. 

Im not sure how much size you like but you can increase/decrease  the size.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "component-list-social.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.list-social__item .icon {
    height: 5rem;
    width: 5rem;
}

• And Save. 
• Result:
• 

[Rogoul · Accepted solution]

Great, thanks. Works very well 👌

At the same time, is it possible to reduce the spacing between each option in the footer menus on mobile ? The spacing between CONTACT, FAQ, etc. ... is too wide.

[Made4uo-Ribe · Accepted solution]

Try this one. If you like to decrease/increase you can adjust ther sizes. 

Same Instruction.

h2.footer-block__heading.inline-richtext, .footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in,
ul.footer-block__details-content.list-unstyled {
    margin-bottom: 1rem !important;
}
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    margin-top: 1rem;
}
.footer-block.grid__item.scroll-trigger.animate--slide-in {
    margin: 2rem 0;
}

And Save. 

Result:

[Rogoul]

Vous êtes un chef 🫡

[Rogoul]

Vu que tu es un bon, j'ai un dernier soucis avec l'icône Facebook. J'aurais aimé qu'il soit placé en version mobile et ordinateur comme sur les captures d'écran 🤔

 

 

[Made4uo-Ribe · Accepted solution]

Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
.footer__content-top.page-width {
    display: flex;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex: auto;
}
.footer-block--newsletter {
    position: absolute;
    right: 25%;
}
}
@media only screen and (max-width: 749px){
.footer-block--newsletter {
    align-items: flex-start;
    margin-top: 0rem !important;
}
.footer-block.grid__item, .footer-block__details-content {
        margin-bottom: 0px !important;
    }
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Rogoul]

Salut

Franchement, tu es vraiment d'une grande aide. Un peu comme mon ange gardien shopify. 👌

Après plusieurs recherches, je ne trouve aucune solution pour arriver au résultat comme sur la photo. Peux-tu m'aider à réaliser cette configuration pour mes réseaux sur mon site. Image plus lien texte. Bien évidemment, il faudrait que cela soit adapté en version mobile comme en version ordinateur. Merci d'avance.