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

Technical Q&A
, ,
1

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

2

Hi @Rogoul

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

3

Ok thanks

https://www.gotin.fr/

GOTINSHOP

4

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;
}
5

Great, thanks. Works very well :ok_hand:

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.

6

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:

Made4uoRibe_0-1697874101381.png
Made4uoRibe_0-1697874101381.png434×494 9.84 KB

7

Vous êtes un chef ?

8

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 :thinking:

1000012819.png
1000012819.png1080×2400 245 KB

1000012820.png
1000012820.png1080×2400 143 KB

9

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;
    }
}

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

10

Salut

Franchement, tu es vraiment d’une grande aide. Un peu comme mon ange gardien shopify. :ok_hand:

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.

1000013106.png
1000013106.png1080×2400 214 KB