Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
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
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>
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>
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>
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>
Please share your store URL.
Hey DMW,
Thank you! It’s Jednay.com
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:
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
Hi Makka,
You are a Legend! Thank you so much.
Best,
Mark
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
*Mobile only.
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>
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
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!
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>
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!!
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>
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?
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>
Thank you so much, i really appreciate it Makka!! All sorted
Best,
Mark
🙂 Glad i could help you. You can remember me if you have any queries regarding theme customizations.
Cheers Makka, and will do! 🙌🏼
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
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024