Dawn 8.0 / Increase size & change location of Instagram & Facebook buttons

Store Design
1

Hi All,

Am the owner of OurHatsDeserveBetter.com. I am not satisfied with the current size & location of the Instagram & Facebook button. Far too small and accessibility somehow limited by the location in the footer.

bibigab_0-1693386354824.png
bibigab_0-1693386354824.png1465×850 298 KB

For the size I have tried an accepted solution (code to be added to theme-liquid:

span.icon.icon-instagram { font-size: 25px !important; }

But it does not work.

For the location, I would like to be able to move it outside of the footer, in the template part.

Is there a simple way to do that?

Best

Eric

1 Like
2

HI! ourhatsdeservebetter.com

3

Please use this CSS code to change font-size of icon

.list-social__item .icon {
    height: 25px !important;
    width: 25px !important;
}

To move section, you will need to move social code from footer.liquid file

4

Hi @bibigab

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyNoah_0-1693388030701.png
PageFlyNoah_0-1693388030701.png1934×1516 607 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

5

Thanks Dan

Is there a way to differentiate size for desktop & mobile? (current size on mobile is fine but too small on desktop)?

How to move the social code?

6

Sure, please use this code so the change will apply for desktop only

@media screen and (min-width: 993px) {
.list-social__item .icon {
    height: 25px !important;
    width: 25px !important;
}
}
7

Hi Noah! Are you sure it is not cut and paste mistake? I do not see the “link” to the Instagram and Facebook icons?

8

Thanks Dan. I cannot use your solution : I have reached the custom CSS 500 characters limit…

9

You can add this code to your theme.liquid file before tag
10

Tks Dan. It works like a charm. Is there a way to change location of these buttons on my product & collection pages without using the custom css for which I have reached already the limit?..

11

Sorry my bad, because i styled the wrong section

as you can see in my screenshot, i increased the size of the svg payment icon

You can try with this code, with the same instructions above