-
Posts
-
Hi guys,
I’ve been working on my site for quite some time and I’ve run into an issue when viewing the site via mobile.
In certain instances text is overlapping itself, and in other cases the text is being cut off by the mobile browser instead of resizing / formatting to the size of the mobile device.Text that overlaps example:
http://gyazo.com/837be526b7f0abace4ff11254216c175Code:
<p style="text-align: left; font-size: 50px; color: #adadad; font-weight: 600;">Why HACKJACKET?</p>Text that gets cut off example:
http://gyazo.com/fcbea67a6e76a4749f23c1f462cf2f10Code:
<span style="font-size: 60px; font-weight: bold; color: #ff6600; line-height: 120%;">PERSONAL</span> <span style="font-size: 60px; font-weight: bold; color: #ffffff; line-height: 120%;">PROTECTION SUITE</span>I assume it’s a line-height issue for the text that overlaps, but as for the text being cut off, I’m not sure what to do. I believe it’s because I’ve stated I want the text to be 60px, and it wont change regardless of screen size.
Hi DaveL77!
Can you post the link to your page where we can see examples? I tried to figure out the url from your screenshots but to no avail :)
Best regards,
YigitHi!
Thank you for the info.
I’m sorry but you’re using a very old version of the theme, 2.4.4. We won’t be able to debug the issue unless you update the theme to 2.7.1. Please download the latest version from your themeforest account then update the theme via FTP. Please refer to this link for more info: http://kriesi.at/documentation/enfold/updating-your-theme-files/
Best regards,
IsmaelI’ve updated this theme and still have the same errors occurring.
I believe they are caused by my code mentioned above, but I’m not 100% sure.
Is there a way to get the text to resize properly / fit the mobile devices?Hey!
Please add line height to your code as following
<span style="font-size: 60px; font-weight: bold; color: #ff6600; line-height: 120%; line-height: 60px;">PERSONAL</span> <span style="font-size: 60px; font-weight: bold; color: #ffffff; line-height: 120%; line-height: 60px;">PROTECTION SUITE</span>Cheers!
YigitLine height issue fixes the overlapping text for sure which is one task solved
The other issue I’m having is that the text gets completely cut off via mobile…
When on the mobile site, you see something comparable to this:
http://gyazo.com/a2ae67b460d2438f988ea1b849dd2c67Is there any way to fix this? or is it because my text is too big in the first place?
Thanks!
The issue above still exists, however since updating the theme, my Logo image on mobile sites is extremely large compared to the browser based version.
Example:
Browser:
http://gyazo.com/13d20eb7e5f1cc265285999513a01cc1
Mobile (or resized to mobile equivalent):
http://gyazo.com/dcde0068dfa24a16d74677bed4dbdf27Im sure this is a coding issue.
My website as mentioned above is
http://hackjacket.staging.wpengine.com/ (hosted on WPengine)Thanks for all your help, it is greatly appreciated!!
Hi!
Add this to fix the mobile issue (i moved the inline styles here, it’s better):
#oshead { line-height: 110%; font-weight: bold; font-size: 80px; color: #ffffff; text-align: center; } @media only screen and (max-width: 767px) { #oshead { font-size: 42px; } }Result:
Cheers!
JosueFor the logo issue:
@media only screen and (max-width: 767px) { .logo, .logo a, .logo img{ max-height: none !important; } .logo{ position: relative !important; top: 20px; left: -35px !important; } a#advanced_menu_toggle { right: -25px !important; } }Result:
The logo fix worked perfectly for me.
The fix for the text using
#oshead { line-height: 110%; font-weight: bold; font-size: 80px; color: #ffffff; text-align: center; } @media only screen and (max-width: 767px) { #oshead { font-size: 42px; } }Did not work. It didn’t seem to change any of the text characteristics at all. I checked via my ipod as well as resizing on the computer. Both yielded the same results.
Your image of the “protect yourself” is exactly what we want though.
Hey!
Your website is not loading, can you post a screenshot of your view on the ipod?
Regards,
JosueSorry website ran into some issues yesterday with our hosting.
Site is back up.http://gyazo.com/7b2374431a8359627e96aeb5b212b576
That is how it looks on the ipod. Its like that code isn’t doing anything.
I put it in the style.cssIt doesn’t work because you need to remove the inline styling (in LS layer options), just keep the #oshead ID:
<div id="oshead" style="line-height: 110%; font-weight: bold; font-size: 75px; color: #ffffff; text-align: center;">PROTECT <span style="color: #ff6600;">YOURSELF</span></div>The code i provided already covers that + the mobile view.
Best regards,
JosueNot too sure what you mean by needing me to remove the inline styling in my LS Layer options.
I removed the styling from the code
<div id="oshead" style="line-height: 110%; font-weight: bold; font-size: 75px; color: #ffffff; text-align: center;">PROTECT <span style="color: #ff6600;">YOURSELF</span></div>and made it simply:
<div id="oshead">PROTECT <span style="color: #ff6600;">YOURSELF</span></div>This just caused the text to a lot smaller and not formatted properly.
If LS is meaning layerslider, I do not use it.Hopefully this makes sense to you, I’ve tried to add the code you provided to style.css of the child theme, it doesn’t seem to work.
I understand what your code has done, making the text size change from 80 to 42 on mobile, which should solve the issue, but I’m not sure why it’s not working at all for me.
This works, it was a plugin bwp minify that was causing the issue.
The font you have showing there was not the “oswald” font that we had wanted, which cause other issues.Thanks for your help!!!
- The topic ‘Page formatting causing text overlapping & poor layout on mobile site.’ is closed to new replies.