Home › Forums › All Other Themes › Reduce Header Size on Mobile & Laptop
- This topic has 5 replies, 2 voices, and was last updated 3 years, 10 months ago by
Forum Moderator.
-
AuthorPosts
-
November 22, 2019 at 12:31 pm #139877
Here’s an example page from my website:
https://knoxstudy.com/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?
November 25, 2019 at 4:57 am #139922Hi,
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,
ChrisNovember 25, 2019 at 11:29 am #139948Thanks, Chris. This has worked well on the mobile, but there is no change on tablet or desktop. Please advise.
November 25, 2019 at 11:38 am #139949Hi,
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,
ChrisNovember 25, 2019 at 11:56 am #139952Perfect. Thanks.
November 25, 2019 at 12:01 pm #139953Hi,
If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/24/
Regards,
Chris -
AuthorPosts
- You must be logged in to reply to this topic.