-1

craigknelson

I'm not great at coding - I can customize existing stuff but I'm having a lot of trouble correcting the logo/header on my page. It's just text that says "craigknelson" on the top left of the page.

It works perfectly fine on desktop when sizing a browser window down, but when viewed on mobile it stretches the text, and thus stretches the width of my entire window.

Is this a CSS issue with my text spacing?

mobile site

Craig Nelson
  • 1
  • 2

2 Answers2

0

Your site is simple and clean.. Reduce the letter spacing and line-height.

user3260487
  • 75
  • 10
  • Hi, thank you! I tried reducing letter spacing - which negatively affected the desktop display (which is where I expect most traffic due to the nature of the site), but would like it to display correctly on mobile as well. I guess it may be a matter of adjusting letter-spacing elsewhere? I'm just not sure if there's another reason it's displaying like that. – Craig Nelson Sep 28 '16 at 05:59
-1

Mind sharing an image of what it looks like on your side, I can then get a better understanding of the problem you are having. Also, after looking at your website(nice looking one too), I played with the the letter spacing and that might have something to do with it. Maybe it has to do with the mobile browser defaults, such as they may already have some letter spacing and adding more makes it stretched. Try removing all letter spacing and the re-add it to make sure that there are no browser default. If all else fails, try using px instead of em for the letter spacing measurements. Thanks!

Tishbyte
  • 40
  • 8
  • Thank you! And sure thing I should have done that to begin with. – Craig Nelson Sep 28 '16 at 05:51
  • Letter spacing seems to work by pixel size, and thus for a desktop which has plenty of pixels, it looks okay. But for a mobile which doesn't have pixels it takes a majority of the space. A possible suggestion would be to take the logo text and convert it into an svg image that scales accordingly. – Tishbyte Sep 28 '16 at 16:03
  • This didn't quite solve the issue at hand but it was a great workaround! Converted to a .svg Thank you for the suggestion you rock! – Craig Nelson Sep 29 '16 at 06:50
  • Another possible solution is to detect the os type and change the letter spacing accordingly. http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript If this stuff helps, be a good gentleman and upvote my answers. Otherwise do not do anything :P – Tishbyte Sep 30 '16 at 00:28