Overall font size is footer differs from the rest

Support
#1

Hey there,
while styling the submit button of my contact form, that is placed in the footer, I got the feeling that the fonts in the footer are displayed smaller. I added the same properties to the button in the form http://prntscr.com/mv7rpb and the ones on my page http://prntscr.com/mv7s5c

the one in the footer is smaller, same goes for all the other text used in the footer

Thanks for your help!

#2

Hi @zerotoone.de,

Thanks for reaching out.

May I know which page has the same form but bigger button font size? I like to check it and compare, the one in the footer has font size of 0.85em which is yes, smaller. This is the CSS responsible for that

.mc4wp-form input[type="submit"] {
    color: rgb(255,255,255);
    border: none;
    background-color: rgb(236,98,84);
    text-shadow: none;
    font-size: 0.85em;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0em 0.1em 0.25em hsla(0,0%,23%,0.25);
    padding: 0.85em 1em 0.85em 1em;
}

It’s not coming from theme’s CSS nor footer font styling.

Thanks!

#3

please have a look at the page I send you in the secure note. please compare the button of my contactform in the footer and the buttons at the pricing section

#4

Hi @zerotoone.de,

Your buttons have the same size now. I see that you followed the size of your form button.





Yes, your footer text are slightly smaller, it was set as 1em while your body text is set as 1.25em

Hope it helps,
Cheers!

#5

Where do you see, that my body text is set to 1.25? is this a global setting?

the base font size of the section made in the content editor is 1em, the font size for the text in the buttons are set to 0.85em
now when I edit the footer the font size is handled differently, even when I set the size of the button text to 0.85em, the same size as my contents text, it is not displayed as such

REMEMBER

its all about the font size of the buttons right now

the issue with the body text in the footer is for later

#6

Hello @zerotoone.de,

By default, all elements will inherit the global settings you have in X > Theme Options > Typography. When you add a v2 element like the button itself, it has it’s own default font settings and it is independent from the global settings. You must make sure that the button element has the same font size with the global settings and not the other way around. By the way, you can also adjust the global button settings in X > Theme Options > Buttons.

Hope this helps. Please let us know how it goes.

#7

I did not add an button, this is the submit button that comes by default. All I need to know is how I can make this button the same size as all my other orange buttons on my page

#8

Hi @zerotoone.de,

It appears there is a CSS added to Element CSS but I’m not sure which, do you remember adding one on this section?

Else, please provide your admin login credentials in the secure note. It’s the font 0.85em applied through CSS for that form.

Thanks!

#9

I did not add any css, could be something added by this section as it was added via the design cloud and customized
I added a secure note

#10

Hi @zerotoone.de,

It’s in your footer CSS, I’m not sure who added it. Please change its font size to match the other.

Thanks!

#11

I could have changed the font size myself if it was that easy, but there is a problem with the footer even WITH THE SAME FONT SIZE SET in the footer and the body the FONT IN THE FOOTER IS STILL DISPLAYED SMALLER. Maybe you understand the issue now

#12

Hi @zerotoone.de,

I checked and it still the same font size, the 0.85em

I went ahead and changed the font size from that CSS to 1.25em.

.mc4wp-form input[type="submit"] {
    color: rgb(255,255,255);
    border: none;
    background-color: rgb(236,98,84);
    text-shadow: none;
    font-size: 1.25em; /* <<<< New font size */
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0em 0.1em 0.25em hsla(0,0%,23%,0.25);
    padding: 0.85em 1em 0.85em 1em;
}

Or, may I know here you’re trying to change it? Maybe I could help and maybe I’m looking at the wrong footer button.

Thanks!

#13

Thank you, but now the footer button text is BIGGER than the button text in the body.

I dont know why I got to fiddle around with font size, this is a general theme issue and formulates simple as this:
Footer text is not displayed the same size as other text, even when set to the same size

#14

Please let me clarify first that this is not an issue with the theme. The theme has preset sizes for generic buttons and that includes the form buttons. You can set it up in Theme Options > Button. That is why they are not the same size as the buttons in the content more so that you’re using V2 buttons which you can set the font size individually.

This also boils down to user setup which the theme allows. With that said, though we are here to help, it’s ultimately the user’s responsibility to understand the behavior of CSS especially custom CSS.

For example, you’re using EM as the unit for your buttons. That CSS unit is powerful but it’s not that straight forward. To understand it, please read https://www.sitepoint.com/power-em-units-css/

If you need a simple setup, use PX for all your font sizes. Just note that you won’t be able to scale text with it.

I’ve setup your form’s button font size to 0.85em and it’s the same size as your content now. Please watch the video in the secure note.

Here are the resources referred in the video:

I also see you have HTML in the button’s text for styling purposes. I’d recommend that you remove it as it’s not necessary because the builder has those properties you’ve used in the HTML.

Thanks.

#16

thanks for taking the time, however the font size is not the same, I used my screenshot program to compare the size and the submit button is exactly 5px smaller than the buttons in my content area

#17

Hi @zerotoone.de,

That is not accurate, screenshot programs are not for measuring.

This is very confusing to us because on our end all your buttons in the body and footer have the same size at 11.9px (that is the calculated value of 0.85em), take a look on the following screenshots.

Body buttons.





Footer button


So you set all your button text size to 0.85em, and that is calculated as 11.9px base from the 14px from the parent div. (14 x 0.85 = 11.9)

Even the letter-spacing and line-height and the padding are all the same, obviously, the footer button is shorter because it has a shorter label (Anmelden) than the rest. So maybe its not the button text size is your issue? Please clarify.

Regarding the Footer content text, I see that you change some of the Bar’s base font size



I advise that you set all your Sections and Bar’s base font size back to default 1em and adjust only the font-size option on the text itself.

Like Christian said above em unit is not a straight forward it will account the font-size of its parent div and the font-sizes that you set via CSS, so it’s a bit complex than the px.

CSS units for font-size: px | em | rem

Thanks,

#18

okay here you go, button in the body is higher than

the button in the footer

thats the first problem, you can reproduce it by using any screenshot software like lightshot screenshot that lets you select the desired area to screenshot

secondly I’d like the font size in my footer to be the same as used in the body here: http://prntscr.com/my8g6z

thanks for your help!

#19

Hi @zerotoone.de ,

I have check it too and yes I can see the same as @friech. The button have the same font size. Look here below. I did screenshot both parts. Using an editor I overlapped the text of the button. Same height I see it.

That specific text you do have on your screenshot is set to 1.25em which is 17.5px. Please edit the text element on the footer and set the fotn to 1.25em too.

Hope this helps.

#20

Yes you overlapped the buttons in the body. They are the same height, sure :smiley: but you need to compare the ones you overlapped with the one in the footer.

you can even see it on your screenshot, they are not the same size

#21

Hi @zerotoone.de,

If you want it to be same size, please set font-size and padding to px instead of em

As my colleagues have already said em unit is not a straight forward it will account the font-size of its parent div and the font-sizes that you set via CSS, so it’s a bit complex than the px.

Thanks