Home Forums Porto Template Responsive Controls

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

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

    AndeeR
    Participant

    Website responsiveness is great. However, there is a “not-sweet spot” (around 700 x 970 px) where my opening screen is too tall. If the browser is narrowed, the height begins to shorten as well, and it works. And if the browser is widened, the container gets shorter also, and that works. But at 970 width, it’s too tall. I need to alter the height for tablet views.

    The section I’m trying to alter is the “slider-container rev_slider_wrapper” div starting at line 174 at https://www.floridabirdingandnaturefestival.org/.

    I think I’ve just lost what css entries control this. Thank you for your help,
    Andee


    #10027071

    Support2
    Keymaster

    Hello Andee,

    My suggestion for you is the steps below:

    1) I saw that you are using two JS demo files (event and education). In that case please remove the “Revolution Slider” code of demo-education.js.

    2) In demo-event.js change the option sliderLayout to:

    sliderLayout: 'fullscreen',

    3) Try re-position the elements changing offset of “y” axis when resolution is 970px. For it you can use the “Responsive Levels” of each element, for example:

    <div class="tp-caption custom-font-size-1 text-color-light font-weight-semibold text-uppercase"
    	data-x="['left','left','left','left']"
    	data-hoffset="['80','80','80','80']" 
    	data-y="['center','center','center','center']"
    	data-voffset="['-101','-101','VALUE_970_HERE','-101']" 
    	data-start="500"
    	data-paddingleft="['0', '0', '0', '0']"
    	style="z-index: 5; font-size: 18px;"
    	data-transform_in="y:[-300%];opacity:0;s:500;">4 Days, 21 Field Trips, 42 Seminars, and a Nature Expo</div>

    * The responsive levels are defined at slider option: responsiveLevels: [1920, 1200, 992, 500], (demo-event.js)
    * You can learn more about “Responsive Levels” here: https://www.themepunch.com/revsliderjquery-doc/responsive-setup/

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

    Kind Regards,

    Rodrigo.


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