Hero Content Layout: Large Text. The text is cut off on the mobile.

Hi there,

What is your site url ?

Hi,
Can you provide me a link of website

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

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 ?

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?

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 8 years, 2 months ago by congthien.
• This reply was modified 8 years, 2 months ago by congthien.

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?

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