Reduce Header Size on Mobile & Laptop

[Lawrence Knox]

Here’s an example page from my website:

About Us

The headers are composed of an all-turquoise photo. Currently there is a lot of empty space below the tagline on both laptop and mobile headers. I would like to cut this space by about 55% on laptop and 30% on mobile.

Is this a job for CSS or do I need to do change the photo dimensions?

[Forum Moderator]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.page_head { height:120px !important; width:100% !important;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
.page_head { height:120px !important;}
}

Regards,
Chris

[Lawrence Knox]

Thanks, Chris. This has worked well on the mobile, but there is no change on tablet or desktop. Please advise.

[Forum Moderator]

Hi,

Kindly use this one:

@media screen and (min-width:1024px) and (max-width:1169px) {
.page_head { height:150px !important;}
}
.page_head { height:200px !important;}

Regards,
Chris

[Lawrence Knox]

Perfect. Thanks.

[Forum Moderator]

Hi,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/24/

Regards,
Chris

[Author]

Posts