H1 text wider than mobile screen

[smtux]

Dear Support,

I’m experiencing a problem with the length of H1 on the home page of your PORTO template.

Indeed, the length of this text (name of the company) is in H1 format, but when I resize the screen to emulate mobile phones, the text is cut.

Is there any CSS option that I can use to overcome this problem?

Thanks.

---

• This topic was modified 2 weeks, 2 days ago by smtux. Reason: added private link of my website
• This topic was modified 2 weeks, 2 days ago by smtux.

[Support]

Hello, if you are talking about the H1 in the slider you can set it based in the responsive levels, for example:

<h1 class="tp-caption font-weight-semibold text-color-light tp-static-layer"
		data-x="center" data-hoffset="0"
		data-y="center" data-voffset="-50"
		data-start="800"
		data-startslide="0"
		data-endslide="99"
		data-fontsize="['76','40','40','40']"
		data-lineheight="['70','40','40','40']"
		data-transform_in="y:[-300%];opacity:0;s:500;">Text</h1>

data-fontsize and data-lineheight do the trick.

Kind Regards.

---

[smtux]

This reply has been marked as private.

[Support]

Hello, sorry, but in this case there’s nothing you can do with CSS or something like that in that, the only option would be detect low resolutions size and change title with JS:

(js/custom.js)

if( $(window).width() < 992 ) {
    document.querySelector('title').textContent = 'mobile';
} else {
    document.querySelector('title').textContent = 'not mobile';	
}

Regards.

---

[smtux]

This reply has been marked as private.

[Support]

Hello,

The JS I provided will just change the name (on page load) to a simplified version in low resolutions, you would have to use 2 different titles, one for mobile and one for desktop. That’s the only thing you can do with the title, you can’t split it.

---

[smtux]

This reply has been marked as private.

[Support]

Hello, please check my first reply in this topic, it’s exactly about that.

---

[Author]

Posts