Solved

Centralise social links and email box text

Jednay
Excursionist
77 0 1

Hi everyone,

 

How would I go about centralising the social links and email box text please? I added some code to centralise all of our footer links, images etc but it failed on these two bits. I’m using the Prestige theme.

 

Thank you in advance!

 

Best,

Mark

 

IMG_4815.jpeg

Accepted Solutions (5)

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Hi @Jednay ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media only screen and (max-width: 600px) {
  .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
}
</style>

Result: 

theycallmemakka_0-1711533146810.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Hi @Jednay ,

 

You can replace the previous  code with the  below code. This should make the alignment to center.

<style>
 .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
</style>

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Hi @Jednay ,

 

The below code should make the text small. However, to fit in 2 lines, we will have to reduce the font size to 9px which is very small.

 

<style>
@media only screen and (max-width: 600px) {
.footer__aside p {
    font-size: 9px;
}
}
</style>

 

 

theycallmemakka_0-1711536882019.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Yes. you can increatse the px to adjust the font size. You can add the below code at the end of theme.liquid file just above </body>

 

<style>
@media only screen and (max-width: 600px) {
  .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
.footer__aside p {
    font-size: 9px;
}
}
</style>

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

@Jednay  I have updated the code to resize the payment icons. You can play with "max-width: 30px;" in the below code to adjuct the ison size.

<style>
@media only screen and (max-width: 600px) {
  .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
.footer__aside p {
    font-size: 9px;
}
.payment-methods svg {
max-width: 30px;
}
}
</style>

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 20 (20)

dmwwebartisan
Shopify Partner
12291 2547 3698

@Jednay 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Jednay
Excursionist
77 0 1

Hey DMW,

 

Thank you! It’s Jednay.com

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Hi @Jednay ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media only screen and (max-width: 600px) {
  .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
}
</style>

Result: 

theycallmemakka_0-1711533146810.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

Hi Makka,

 

You are a Legend! Thank you so much.

 

Best,

Mark

Jednay
Excursionist
77 0 1

Hi Makka,

 

Thanks again for that!

 

I don't suppose you know how to reduce the size of both the company info text and the payment icons?

 

Best,

Mark

Jednay
Excursionist
77 0 1

*Mobile only. 

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Hi @Jednay ,

 

You can replace the previous  code with the  below code. This should make the alignment to center.

<style>
 .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
</style>

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

Hi Makka,

 

I don't understand? It did centralise it with the previous code, that's worked fine. I just want to reduce the bottom Company info text and the payment icons slightly, unless you mean that this new code will do that and keep it central?

 

Many thanks,

Mark

theycallmemakka
Shopify Partner
1378 306 334

Hi @Jednay ,

 

by reducing the size do you mean decreasing the font size?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

Yes, just enough so that the company info is in 2 lines on a mobile not 3. Ignore the ‘FOR YOU JAYDEN’ as that isn’t in the code, that’s written in my default code in the ‘powered by shopify’ box

 

 

 

IMG_4819.jpeg

 

IMG_4820.jpeg

 Cheers Makka!

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Hi @Jednay ,

 

The below code should make the text small. However, to fit in 2 lines, we will have to reduce the font size to 9px which is very small.

 

<style>
@media only screen and (max-width: 600px) {
.footer__aside p {
    font-size: 9px;
}
}
</style>

 

 

theycallmemakka_0-1711536882019.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

That's great thank you! I presume I can then just change the 9px to say 10px, 11px etc etc until it looks ok?

Where do I place the code please?

 

Thank you so much Makka!!

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

Yes. you can increatse the px to adjust the font size. You can add the below code at the end of theme.liquid file just above </body>

 

<style>
@media only screen and (max-width: 600px) {
  .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
.footer__aside p {
    font-size: 9px;
}
}
</style>

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

Thank you so much Makka, 9px was perfect as it threw 'FOR YOU JAYDEN X' down to it's own 3rd line (On an averaged sized iPhone that is) which is what I was after too! Any idea how to reduce the payment icon sizes?

theycallmemakka
Shopify Partner
1378 306 334

This is an accepted solution.

@Jednay  I have updated the code to resize the payment icons. You can play with "max-width: 30px;" in the below code to adjuct the ison size.

<style>
@media only screen and (max-width: 600px) {
  .footer ul.social-media.social-media--list.unstyled-list {
        justify-content: center;
    }
    
    .footer__block--newsletter  input::placeholder {
        text-align: center;
    }
.footer__aside p {
    font-size: 9px;
}
.payment-methods svg {
max-width: 30px;
}
}
</style>

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

Thank you so much, i really appreciate it Makka!! All sorted

 

Best,

Mark

theycallmemakka
Shopify Partner
1378 306 334

🙂 Glad i could help you. You can remember me if you have any queries regarding theme customizations.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Jednay
Excursionist
77 0 1

Cheers Makka, and will do! 🙌🏼

Jednay
Excursionist
77 0 1

Hi Makka,

 

Hope you're well!

 

How would I go about changing my collection list pics to rows of two on a mobile please?

 

Best,

Mark

Jednay
Excursionist
77 0 1

Hi Makka,

 

Hope you're well!

 

How would I go about changing my collection list pics to rows of two on a mobile please?

 

Best,

Mark