Home Forums Porto Template Media Query

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 8 months, 2 weeks ago. This post has been viewed 275 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #10027552



    I need assistance with Slider Text. Looks fine on desktop. But text is not aligned and very small in mobile and tablet view. I could provide screenshots. Just need assistance on how to upload it here.

    Please refer to landing page on website. Thank you.



    Hello, thanks for your purchase.

    1) You can activate the responsiveLevels of revolution slider. For it change the HTML to:

    <div id="revolutionSlider" class="slider rev_slider" data-version="5.4.7" data-plugin-revolution-slider data-plugin-options="{'responsiveLevels': [4096,1200,992,500], 'delay': 9000, 'gridwidth': 1170, 'gridheight': 650, 'disableProgressBar': 'on', 'navigation': {'bullets': {'enable': true, 'direction': 'vertical', 'h_align': 'right', 'v_align': 'center', 'space': 5}, 'arrows': {'enable': false}}}">

    Note that now is defined the resolution breakpoints: 4096px, 1200px, 992px and 500px. Always from the bigger value to the less value.

    2) Now you can set responsive values for each layer inside the revolution slider:

    <div class="tp-caption main-label"
    	data-x="left" data-hoffset="25"
    	data-y="center" data-voffset="-55"
    	style="z-index: 5; text-transform: uppercase;"
    	data-transform_in="y:[-300%];opacity:0;s:500;">The Specialists</div>

    * Note the data-fontsize attribute with the responsive values for each resolution.

    You can use the responsive levels for all attributes on each layer. For example to responsive positions (x and y axis):

    data-x="['left','left','left','center']" data-hoffset="['25','25','25','0']"
    data-y="['center','center','left','left']" data-voffset="['-55','-55','-55','0']"

    You can read more about responsive levels here:

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

    Kind Regards,


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