Support » Theme: Hestia » Changing Page Header on Mobile

  • Resolved shamphibianhealing

    (@shamphibianhealing)


    I am using the Hestia Theme with Elementor. On my pages I have a header with the featured image and the page Title

    I want to modify the height of the top section on a Mobile.

    Q – How do I access and change the height of the top of the page?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • torres126

    (@torres126)

    Hi there,

    By “top section”, are you referring to the bit which I’ve highlighted in green? https://prnt.sc/ljgomb

    The following CSS would allow you to reduce it for mobile devices, so that something like this occurs: https://prnt.sc/ljgpv5

    @media only screen and (max-width: 480px) {
    .elementor-364 .elementor-element.elementor-element-3a6907a > .elementor-widget-container {
    margin-bottom: -10% !important;
    }
    }

    You could always change the value until it suits your needs, but let me know if that works out for you. 🙂

    shamphibianhealing

    (@shamphibianhealing)

    Thanks in advance for the reply, I really appreciate it.

    The section I need help with is a little lower see the attached: https://prntscr.com/ljjif3

    and here’s the same section in Desktop Mode: https://prntscr.com/ljjik8

    torres126

    (@torres126)

    Thanks for clarifying! Could you please try the following CSS, and change the values to whatever suits you:

    @media only screen and (max-width: 480px) {
    /*Following is for the font size*/
    .page-header.header-small .container .hestia-title {
    font-size: 85px !important;
    /*The problem with using that alone is the logo would look off when changing the header, so this is what the following CSS is for*/
    margin-top: -15% !important;
    }
    
    /*For the header size*/
    .page-header.header-small {
    min-height: 0px !important;
    height: 200px !important;
    }

    Using that CSS, you should get this effect, but you can always change the values to suit your needs: https://prnt.sc/ljlr6q

    Let me know if you run into any trouble with that. 🙂

    shamphibianhealing

    (@shamphibianhealing)

    That is exactly what I needed !! Much thanks.

    torres126

    (@torres126)

    Glad it worked!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changing Page Header on Mobile’ is closed to new replies.