Trying to change the font size of the text in my footer

Store Design
1

Hello! I hope someone can help me with this, I have been trying to change the footer text to a larger font as people have been reading our number wrong. Only issue is when I add or edit code it only ever changes the footer headings which is not what I am needing to be larger. Thank you in advance for the help.

Screenshot (13).png
Screenshot (13).png3331×1136 163 KB

2

Hi, @David_Nadtochay

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
#Footer-43a58ce9-ced0-41e9-b5a2-8dfa62ec55a8 > div > div {
    font-size: 20px !important;
}

you can change the value 20 to your choice.

3

If you want to change only the phone number font size, then you can try adding this code to the bottom of theme.css.

#Footer-43a58ce9-ced0-41e9-b5a2-8dfa62ec55a8 .footer__collapsible p strong {
font-size: 18px
}

Alternatively, if you want to change the font size of highlighted area as on the screenshot (call us + send us a message), try this code:

#Footer-43a58ce9-ced0-41e9-b5a2-8dfa62ec55a8 .footer__collapsible p  {
font-size: 18px
}
1 Like
4

The second option did work, the first option would actually of been perfect. But I am satisfied with at least getting it bigger ! Thank you for our help!

1 Like
5

@David_Nadtochay I have seen changes in your store. Now the Phone number is in two lines. You can add the following code to make it on the same line.

.footer__item--43a58ce9-ced0-41e9-b5a2-8dfa62ec55a8 {
    width: auto !important;
}
1 Like
6

Thank you, I adjusted it to make it one line, but will use this if I need it bigger still.

7

Do you possibly know the code for the other column? I think I am just going to make the whole footer text a bit bigger to accommodate that change so it doesn’t look odd. I just don’t know the code for the last column.

8

you can use this code to chaneg all the columns width at once

footer .grid__item {
    width: 33% !important;
}

here is the code for individual elements

Screenshot 2022-07-29 210548.png
Screenshot 2022-07-29 210548.png1918×877 98.9 KB

1 Like
9

Took the code from there, but unfortunately it did not work for that column.

10

you have an error in the code that you have added yourself. plz remove the code from line number 11308 onwards and add this one

.site-footer .footer__collapsible {
    font-size: 18px;
}

for headings add this one

.footer__title {
    font-size: 20px;
}
1 Like
11

This actually worked as well, thank you!