Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • May 20, 2014 at 4:30 pm #267361
    DaveL77

    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/837be526b7f0abace4ff11254216c175

    Code:
    <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/fcbea67a6e76a4749f23c1f462cf2f10

    Code: 

    <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.

    May 22, 2014 at 7:00 pm #268731
    Yigit

    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,
    Yigit

    May 23, 2014 at 9:11 pm #269262
    DaveL77

    edit: forgot to make private

    • This reply was modified 10 years, 6 months ago by DaveL77.
    May 23, 2014 at 9:11 pm #269263
    DaveL77
    This reply has been marked as private.
    May 24, 2014 at 6:06 am #269437
    Ismael

    Hi!

    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,
    Ismael

    May 29, 2014 at 7:09 pm #271943
    DaveL77

    I’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?

    May 29, 2014 at 9:10 pm #272026
    Yigit

    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!
    Yigit

    May 29, 2014 at 10:43 pm #272117
    DaveL77

    Line 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/a2ae67b460d2438f988ea1b849dd2c67

    Is there any way to fix this? or is it because my text is too big in the first place?

    Thanks!

    May 30, 2014 at 5:38 pm #272499
    DaveL77

    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/dcde0068dfa24a16d74677bed4dbdf27

    Im 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!!

    June 2, 2014 at 9:28 pm #273503
    DaveL77

    hoping to find a fix for this header issue.

    June 3, 2014 at 1:47 am #273647
    Josue

    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!
    Josue

    June 3, 2014 at 1:52 am #273649
    Josue

    For 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:

    June 3, 2014 at 11:09 pm #274297
    DaveL77

    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.

    June 4, 2014 at 12:21 am #274329
    Josue

    Hey!

    Your website is not loading, can you post a screenshot of your view on the ipod?

    Regards,
    Josue

    June 4, 2014 at 4:41 pm #274550
    DaveL77

    Sorry 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.css

    June 4, 2014 at 6:30 pm #274625
    Josue

    It 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,
    Josue

    June 4, 2014 at 7:02 pm #274651
    DaveL77

    Not 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 reply was modified 10 years, 5 months ago by DaveL77.
    June 4, 2014 at 7:07 pm #274657
    Josue

    Works for me:

    Refresh a few times or try in another browser.

    Best regards,
    Josue

    June 4, 2014 at 7:19 pm #274672
    DaveL77

    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!!!

    June 4, 2014 at 7:22 pm #274675
    Josue

    You are welcome, always glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Page formatting causing text overlapping & poor layout on mobile site.’ is closed to new replies.