[Resolved] Page Hero Header Element padding issue with code

[Marcel]

Hi There,

I’m having some issues getting the correct height of my Page Hero Header (in Elements).

I have a couple of Headers on pages that have a background Image and some simple HTML in the content-box and there I’m able to use the padding-settings to determine the height of the Header. That works perfect and as it should: https://docs.generatepress.com/article/header-element-overview/#padding

But now I wanted to create a Header element which contains a Slider of some images. I’ve put some html-code and script-code in the Content-box and it works so far (see here on my demo-site: https://pasuk.nieuwewebsiteonline.nl/over-ons-2/).
And because I have the images in the Content-box I didn’t need to add a background image.

The problem though is if I use the padding-settings the Header (slider) stays the same Height but it looks like there is created margins around it instead of padding. For example: when I choose 10% bottom-padding the Header stays the same height but the text under it goes down. The same for 100px. Or when I choose f.e. 50px padding at the top it pushes my Header element down.

Ok, I do understand that now my content is different than on the other pages, but my questions are:

1. How can I change the height of this element to something in % or at least the same as the other pages?
BTW: when I add a height: 100px; to the .page-hero that works, but with percentage is doesn’t.

2. Or is it better not to implement a slider like this (it works great btw, except the height..)?

Thanks for your help,

Marcel

[David]

Hi there,

so are you wanting to increase the height of the slider ?

[Marcel]

Hi David, actually on some devices an increase and some a decrease. The slider should be the same height (on all devices) like the other pages, for example this one: https://pasuk.nieuwewebsiteonline.nl/help-mee/wat-kan-ik-doen/

When I resize my browser both Header element resize in height but not the same. The element above has a padding top and bottom of 10%.

[David]

The padding value won’t change the size of the Slider. If you need to adjust the height of the slider you would need to chek the plugin settings.

[Marcel]

Hi David, I noticed indeed that the padding didn’t work but the problem is that I didn’t use a plugin for the slider but some html and script-code in the Content-box, together with some css-code in the Customizer, extra css…

Any tips on how to change the slider-height in this case?

Thanks

[Elvin]

Hi Marcel,

Try this CSS:

.mySlides {
    height: 100% !important;
}

.mySlides img {
    height: 100% !important;
    width: auto !important;
    object-fit: cover;
}

/* for mobile */
@media (max-width:768px){
    .slideshow-container {
        height: 300px;
    }
}

/* for tablets and smaller desktops */
@media (min-width:769px) and (max-width:1024px){
    .slideshow-container {
        height: 500px;
    }
}

/* for larger desktops */
@media (min-width:1025px){
    .slideshow-container {
        height: 700px;
    }
}

You then adjust the value of .slideshow-container‘s height for different viewports to your preference.

[Marcel]

Hi Elvin,

I’ll try that option, it would be different that the other headers but it’l work. Thx!

[Elvin]

Let us know if you need further help. No problem. 😀

[Author]

Posts