Centralise social links and email box text

[Jednay]

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

 

[theycallmemakka · 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: 

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

[theycallmemakka · 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>

[theycallmemakka · 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 · 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>

[dmwwebartisan]

@Jednay 

Please share your store URL.

[Jednay]

Hey DMW,

Thank you! It’s Jednay.com

[theycallmemakka · 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: 

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

[Jednay]

Hi Makka,

You are a Legend! Thank you so much.

Best,

Mark

[Jednay]

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]

*Mobile only. 

[theycallmemakka · 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>

[Jednay]

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]

Hi @Jednay ,

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

[Jednay]

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

 Cheers Makka!

[theycallmemakka · 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>

[Jednay]

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 · 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>

[Jednay]

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 · 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>

[Jednay]

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

Best,

Mark

[theycallmemakka]

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

[Jednay]

Cheers Makka, and will do! 🙌🏼

[Jednay]

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]

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