[Resolved] Page Hero Header Element padding issue with code

Home Forums Support [Resolved] Page Hero Header Element padding issue with code

Home Forums Support Page Hero Header Element padding issue with code

  • This topic has 7 replies, 3 voices, and was last updated 3 months ago by Elvin.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1968396
    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

    #1968727
    David
    Staff
    Customer Support

    Hi there,

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

    #1968832
    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%.

    #1969039
    David
    Staff
    Customer Support

    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.

    #1970360
    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

    #1970381
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1970595
    Marcel

    Hi Elvin,

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

    #1971334
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.