demo-one-page-agency.html help

[WebDevUS]

On the landing page revolution slider, I changed the h1 text to my own which is a little longer than the text in the demo.

The text overflows off the screen especially on mobile.

– How do I make the text stay on the screen?

– Is there a way to make it go from all being inline, to being like the example below?

DESKTOP TEXT LAYOUT EXAMPLE:

Health Insurance Contracting Needs?

MOBILE TEXT LAYOUT EXAMPLE:

Health Insurance
Contracting Needs?

Best regards,

-Kepler

---

[WebDevUS]

<ul style="width: 100%;">
  <li data-transition="fade">

    <h1 class="tp-caption text-color-light font-weight-bold kep-landingpagetxt"
      data-x="['left','left','left','left']" data-hoffset="['0','0','30','85']"
      data-y="center" data-voffset="-55"
      data-start="500"
      data-fontsize="80"

<!-- THIS IS THE TEXT THAT IS RENDERING OFF THE EDGE OF THE SCREEN -->

      data-transform_in="y:[-300%];opacity:0;s:500;">Health Insurance Contracting Needs?</h1>

<!-- END OF TEXT THAT IS RENDERING OFF THE EDGE OF THE SCREEN -->

    <div class="tp-caption text-color-light"
      data-x="['left','left','left','left']" data-hoffset="['0','0','30','85']"
      data-y="['center','center','center','center']" data-voffset="['-10','-10','-10','0']"
      data-start="1500"
      data-fontsize="['18','18','18','25']"
      data-whitespace="nowrap"
      data-transform_in="y:[100%];s:500;"
      data-transform_out="opacity:0;s:500;"
      data-mask_in="x:0px;y:0px;">CHECK OUR OPTIONS AND FEATURES</div>

     <div class="tp-caption"
       data-x="['left','left','left','left']" data-hoffset="['0','0','30','85']"
       data-y="['center','center','center','center']" data-voffset="['15','15','15','35']"
       data-start="2000"
       data-fontsize="['12','12','12','19']"
       data-transform_in="y:[100%];opacity:0;s:500;">TRANSFORMATIVE MEDICAL - ARIZONA</div>
    </li>

---

[Support]

Hello,

As you text is very big, you need control the font size on each screen size. For it you can use responsive values for font size:

<h1 class="tp-caption text-color-light font-weight-bold kep-landingpagetxt"
  data-x="['left','left','left','left']" data-hoffset="['0','0','30','85']"
  data-y="center" data-voffset="['-55','-55','-45','-40']"
  data-start="500"
  data-fontsize="['65','50','40','35']"
  data-transform_in="y:[-300%];opacity:0;s:500;">Health Insurance Contracting Needs?</h1>

* Note data-fontsize="['65','50','40','35']". Where values represents each screen size, respectively (large desktop, small desktop, tablets, smartphones)
* Note data-voffset="['-55','-55','-45','-40']".

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts