Solved

Footer text font size smaller and mobile footer smaller (Symmetry Theme)

Delasoul
Excursionist
36 0 3

I have two questions about the footer: 

 

1. Footer (desktop): I would like to have the text size smaller. Can anybody help me?

Footer.JPG

 

2. My mobile footer is veryyy long at the moment. Is there any chance to have it split into two columns to make it shorter/more compact OR/AND to hide single elements ONLY on the mobile view (for example the newsletter or the store text)?

 

footer mobile.JPG

 

Thank you very much for help!

 

 

Accepted Solution (1)
Liqiud_xPert_SJ
Shopify Partner
730 93 115

This is an accepted solution.

@Delasoul 

 

if you want to reduce the font size on desktop version too then update your code as follow.

 

<style>
.section-footer__row .section-footer__row__col {
	flex: 0 0 40% !important;
	padding-right: 20px !important;
}

.section-footer__row .section-footer__row__col p, .section-footer__row .section-footer__row__col a {
	font-size: 12px !important;
}
</style>

aslo the legal section cannot come up because its in the third column

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

View solution in original post

Replies 4 (4)

Liqiud_xPert_SJ
Shopify Partner
730 93 115

@Delasoul 

please add below CSS code into your theme.liquid file before </body> tag

Shopify Admin > Online Store > Edit Code > Theme Files > theme.liquid

<style>
 @media screen and (max-width: 767px) {
.section-footer__row .section-footer__row__col {
	flex: 0 0 40% !important;
	padding-right: 20px !important;
}

.section-footer__row .section-footer__row__col p, .section-footer__row .section-footer__row__col a {
	font-size: 12px !important;
}
}
</style>

 

Results:

2024-03-28 12_49_36-Preview Beatnik Theme - Symmetry Ecommerce Website Template — Mozilla Firefox.png

Thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Delasoul
Excursionist
36 0 3

Hi @Liqiud_xPert_SJ thanks for your fast response. 
I added the code here:

 

Delasoul_0-1711629533450.png

 

The footer size in the desktop version still stays the same but in the mobile view is perfect now. Do you have another code/advise how I can also decrease the size of my desktop footer font here:

 

Delasoul_1-1711629630010.png

 

And on the mobile version the footer looks like this now. Is it also possible to have the legal part also on the second column?

Delasoul_2-1711629741766.png

 

Thank you so much for help!

 

Liqiud_xPert_SJ
Shopify Partner
730 93 115

This is an accepted solution.

@Delasoul 

 

if you want to reduce the font size on desktop version too then update your code as follow.

 

<style>
.section-footer__row .section-footer__row__col {
	flex: 0 0 40% !important;
	padding-right: 20px !important;
}

.section-footer__row .section-footer__row__col p, .section-footer__row .section-footer__row__col a {
	font-size: 12px !important;
}
</style>

aslo the legal section cannot come up because its in the third column

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Delasoul
Excursionist
36 0 3

Thank you, it worked on the desktop version. Do you now by any chance how I get rid of the button frame in the footer too

Delasoul_0-1711737323511.png