how to set my section height to 100vh

Emmanuel Mannah

• May 16, 2020 21:07

I have a homepage with slider that I will like to cover 100 of the viewport height. please help. My page currently showing a white space at the bottom of the page

1

• 

  Sandra Prunici

  • May 18, 2020 08:33

  Hi Emmanuel,

  I suppose that you see the white space at the bottom of the slider because the height of one slide is bigger than the second slide. This situation happens because the slider needs that all slides have the same height. Therefore, if a slide will have (for example) 500px height and the second slide will have 450 px height, the general height of the slider will be 500px (the slide with the highest value). Therefore the slide with 450px will have some extra paddings to fit in the height of the slider. 
  This is also, your case. The first slide is a bit higher than the second slider because there you have more content and for this reason for the second slider was added some paddings (that black bar) to equal the height with the first slide.
  To fix this problem, I can suggest adding in the second slide a Space element (above the text) and set it with the 20px. I think this value will be sufficient, but if you will still see it, you and increase or decrease it. 
  Hope it will help you!

  Best regards,
  Sandra

  0
• 

  Emmanuel Mannah

  • May 20, 2020 16:32

  Thanks very much for the suggestions you gave, it is highly appreciated.

  This is what I am trying to achieve:  https://overseas.mannaprintinc.com/h1/

  The link above was build using elementor page builder.  My site was build using brizy and that's what I want to maintain

  This is what I am getting with brizy:

  overseas.mannaprintinc.com/services/

  overseas.mannaprintinc.com/contact/

  want to set the { Min-height: 100vh; }

  0
• 

  Sandra Prunici

  • May 21, 2020 06:54

  Hi Emmanuel,

  If you want to display a block on full-screen size, I don't recommend adding the {Min-height: 100vh;} code, it can generate a lot of problems as those you shown in screenshots (also, they can be generated by other CSS lines). To display the block on the full-screen size you have to go to the block settings and set it with full height and full-width https://jumpshare.com/v/tOhQfaQJnCHj3bZRmBxL

  Best regards,

  Sandra

  0

Please sign in to leave a comment.