H1 text wider than mobile screen

Home Forums Porto – Responsive HTML5 Template H1 text wider than mobile screen

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10042626
    smtux
    Participant

    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.
    #10042631
    Support
    Keymaster

    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.


    #10042633
    smtux
    Participant
    This reply has been marked as private.
    #10042634
    Support
    Keymaster

    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.


    #10042635
    smtux
    Participant
    This reply has been marked as private.
    #10042637
    Support
    Keymaster

    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.


    #10042638
    smtux
    Participant
    This reply has been marked as private.
    #10042639
    Support
    Keymaster

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


Viewing 8 posts - 1 through 8 (of 8 total)

This topic is marked as "RESOLVED" and can not rceive new replies.