Support » Theme: OnePress » Hero Content Layout: Large Text. The text is cut off on the mobile.

  • Resolved vm2003

    (@vm2003)


    In my case, the large text in the Hero Content Layout has a long word: “PROFESIONALMENTE”.
    If I look at the web on mobile I see this word incomplete, only appears “PROFESIONALME”.
    This happens with the mobile in vertical position, but in horizontal position it looks right (the complete word).
    Is there any solution to avoid this problem? Keep this word is important to me.
    Thank you in advance,
    Vicenç

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi there,

    What is your site url ?

    Hi,
    Can you provide me a link of website

    Thread Starter vm2003

    (@vm2003)

    Hi congthien and oberoibunty and thank you for your interest.

    I’m working right now with my web and I would like not showing it by now. I’m sorry.

    Anyway, I send you a link to see how the screen image on mobile looks:
    https://www.dropbox.com/s/e0mqph5z41c4779/mobile%20screen.png?dl=0

    You can see in that picture what I told you before: the word “PROFESIONALMENTE” looks incomplete (“PROFESIONALME”).

    In addition, You can try yourself if you want. In your installation write the next in “Section Hero”/”Hero Content Layout”/”Large text”: Gestionamos Adwords Profesionalmente | Google Certified
    In the editing screen I have: Gestionamos Adwords <span class=”js-rotating”>Profesionalmente | Google Certified</span>

    The problem is present only in the rotation: “Gestionamos Adwords Profesionalmente”. In the second rotation: “Gestionamos Adwords Google Certified” it is working using 4 lines.

    Ask me if you need more information.

    Thank you again.
    Vicenç

    Hi vm2003

    sorry to say what it just a screen shoot not a url of the website if can
    give me a url of the website will customize with developer tools

    thanks

    Hi,

    you could try following CSS code

    @media screen and (min-width: 480px)
    .hero-content-style1 h2 {
        font-size: 48px !important;
    }

    just the font size accordingly. if the above CSS code works

    Thread Starter vm2003

    (@vm2003)

    sathishkumarcw, thank you for your help.

    I tried that code but the problem remains. After changing the code I see the mobile screen with the same problem described before.

    Thnaks anyway,
    Vicenç

    hey @vm2003,

    Is it too hard to sharing your site url ?

    Thread Starter vm2003

    (@vm2003)

    Hi congthien. Thank you for answering again. I’m sorry for that. As I told you before my web is not ready yet and I would prefer not showing it by now. When completed, I will be pleased to share it with you. I’m using your theme and I’m very happy with the first results. By now only this little issue, and only in mobile screens in vertical position.
    I explained the issue before and I sent a screen image to understand better what was happening.
    I think that, in this case, it is very easy to simulate the same issue in any other installation. The word that generates the problem is “PROFESIONALMENTE”. It seems that word is too long to be shown in one only line if we look at the web in a mobile in a vertical position (horizontal position looks great). You can check yourself if you want. If you do it, you will see the problem in your mobile.
    Regards,
    Vicenç

    Thread Starter vm2003

    (@vm2003)

    Hi congthien,

    No answer means that you will not answer by now to try to solve this issue
    or simply it is a delay 😉 ?

    Did you try to simulate the issue?

    Thank you again!
    Regards,
    Vicenç

    Hi @vm2003,

    I’m really sorry for late reply. In your case, we have 2 solutions, you can choose which is the best 🙂

    Please add following custom CSS to your theme using Simple Custom CSS Editor:

    #solution 1 :
    .hero-content-style1 h2 { word-break : break-all; }

    #solution 2 :

    @media screen and (max-width: 720px) {
    .hero-content-style1 h2 { font-size: 40px; }
    }
    

    Or you can decrease the font size a little.

    You can apply one of them to check 🙂

    • This reply was modified 4 years, 7 months ago by congthien.
    • This reply was modified 4 years, 7 months ago by congthien.
    Thread Starter vm2003

    (@vm2003)

    Hi congthien, and thank you one more time for your support.
    Solution #1 is not the good solution. It breaks the words in an unproperly way.
    Solution #2 decreasing the font size for style h2 to 26px works.
    For me the issue is closed.
    Regards,
    Vicenç

    Thread Starter vm2003

    (@vm2003)

    congthien,

    If you send me to my email a contact email adress I will let you know when my web is finished.

    Regards,
    Vicenç

    I have somewhat the same problem, so I thought it best to continue this thread over posting a new.

    1. The identical part is on FHD (1920 x 1080) smartphones. Long words, such as ‘psychologist’ gets cut off in vertical mode. If you prefer an URL for reviewing the issue, go to: https://www.mindlang.com.

    I tried manually pasting the above mentioned #solution 2 into the style.css file, as I do not have the Simple Custom CSS plugin. It didn’t work right off the bat, of course, but even when I fiddled with changing the size cut-off, I still got nowhere. Not a CSS guy.

    2. Also, when flipping a FHD smartphone into horizontal mode, the top line of hero H1 text is meshed on top of the top menu, at least when there are three lines, as I have. Maybe that’s just how it is? Not a huge issue, anyway.

    …now I’m off to search the forum for “black hero image on mobile devices”. Happened after upgrading the theme to 1.2.5 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Hero Content Layout: Large Text. The text is cut off on the mobile.’ is closed to new replies.