Home Forums Porto Template Media Query

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 2 weeks, 5 days ago. This post has been viewed 58 times

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

    cochn01
    Participant

    Hello,

    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.


    #10027554

    Support2
    Keymaster

    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"
    	data-start="500"
    	data-fontsize="['50','52','62','85']"
    	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:
    https://www.themepunch.com/revsliderjquery-doc/responsive-setup/#custom-grid-sizes

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

    Kind Regards,

    Rodrigo.


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