Changing Page Header on Mobile

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. ??

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

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. ??

That is exactly what I needed !! Much thanks.

Glad it worked!