Adjust letter-spacing / kerning / horizontal alignment between text

  • 21 June 2017
  • 9 replies
  • 230 views

For some reason all the text on my page has a letter-spacing of -1px in the span tags for the code of the text. I edited my CSS stylesheet to add letter-spacing changes for all paragraph

sections but it doesn’t seem to be changing it.

can i edit this in the unbounce UI like i can with line height? if not, what am i doing wrong?


9 replies

Sgro28 are you using firefox and a custom font? I have to assume yes as I have seen this issue myself.

transform: none !important;
word-spacing: 0 !important;
letter-spacing: 0 !important;

Add that to all of the elements in your style sheet and you should be ok. Let me know how it goes, and feel free to share a link to the page if you need further debugging.

We are pulling in a custom font with font face but it doesn’t seem to actually be used on the page. will the css you provided prevent us from using the custom font on the page? i will give it a try.

this unfortunately did not work, the letter-spacing on the source code of all text boxes still have letter-spacing:-1px in span tags

Sgro28, can you share the link to the page? When I have run into this issue it is with a custom font. Where are you getting the font from and are you loading in the source URL with the @font-face attribute? or are you loading it in through a separate script tag?

Joe

ok i fixed this in the html for each text box, but now the page does not look like it does in preview. it’s basically broken on mobile and on desktop things run into each other. can you please help me troubleshoot this?

http://try.parkwhiz.com/employee-parking/

can you take a look at this, it looks good in every browser except chrome on mac Version 59.0.3071.109 (Official Build) (64-bit)…

some weird CSS things happening http://try.parkwhiz.com/employee-parking/

To which elements? That will help narrow down quicker. I see a lot of inline styles no user sheet.

it’s the text that starts with “take advantage…” and also “get more information…” and actually seems to be a device resolution issue effecting my computer specifically 😕 the text is hanging over to a new line instead of being full width like on other browsers

it’s the text that starts with “take advantage…” and also “get more information…” and actually seems to be a device resolution issue effecting my computer specifically 😕 the text is hanging over to a new line instead of being full width like on other browsers

Reply