Video/slider/element adjust to section resizing

Support
#1

Hi, at the moment an element, that on full screen is full width and height of the section, doesn’t keep to this rule when I re-size the screen or view on a different device. How can the video/slider/element adjust to section resizing?

#2

Hey @MarkJagdev,

Setting the element’s height to 100vh using Element CSS should make the element follow the screen’s height.

Please give us the URL of the page you’re working on and give us a screenshot of the element so we could check it’s setup and see why it does not follow the screen’s height.

Thanks.

#3

Hi @christian_y,

The sections are now perfectly aligning to full width and height of whatever screen I am on. If I am creating a section that has one element on it e.g. a slider, then I want that slider to cover the full dimensions of the section whatever screen I am on. It is doing that in full screen mode but not on other screen/browser sizes so I begin to see the section background colour which translates to loads of blank space where the next section should start. The url is www.flowcise.com the front page.

#4

@MarkJagdev,

Thank you for the clarification, regretfully the Classic Slider element was designed to be responsive and it has no option for a full-screen slider.

I advise utilizing the Revolution Slider extension instead for creating a full-screen slider.

Extension - Revolution Slider
How To Make A Full Screen Revolution Slider

If you need a full-screen slider template, you can download one here.

Cheers!

#5

That’s great @friech but just in case for further clarification it is not the element (as I am happy that resizes) it is the section that is not adjusting in the same way as the element resizing?

#6

Hi @MarkJagdev,

Thank you for the clarification, so the issue is the Section, not the slider.

That is because all your section is set to 100vh height with the following custom CSS (it’s in Theme Option > CSS)

.x-section {
    height: 100vh;
    position: relative;
}

Is that intentional? for all your section to have a 100vh height? If not please remove it. What is happening is your section will have the 100% height of the screen, regardless if that section has enough content or not to cover the whole screen.

If you only want a specific section to have a 100vh height, please add this to that Section’s Element CSS area instead.

$el.x-section {
  min-height: 100vh;
}

Hope it helps,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.