Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #267361

    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.

    #268731

    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

    #269262

    edit: forgot to make private

    • This reply was modified 9 years, 10 months ago by DaveL77.
    #269263
    This reply has been marked as private.
    #269437

    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

    #271943

    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?

    #272026

    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

    #272117

    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!

    #272499

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

    #273503

    hoping to find a fix for this header issue.

    #273647

    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

    #273649

    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:

    #274297

    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.

    #274329

    Hey!

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

    Regards,
    Josue

    #274550

    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

    #274625

    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

    #274651

    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 9 years, 10 months ago by DaveL77.
    #274657

    Works for me:

    Refresh a few times or try in another browser.

    Best regards,
    Josue

    #274672

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

    #274675

    You are welcome, always glad to help :)

    Regards,
    Josue

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.