Reduce Header Size on Mobile & Laptop

Home Forums All Other Themes Reduce Header Size on Mobile & Laptop

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #139877
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

    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?

    #139922
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22784
    • Total: 22784
    Member since: August 16, 2013

    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

    #139948
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

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

    #139949
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22784
    • Total: 22784
    Member since: August 16, 2013

    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

    #139952
    Lawrence Knox
    Participant
    • Topics: 5
    • Replies: 9
    • Total: 14
    Member since: October 5, 2019

    Perfect. Thanks.

    #139953
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22784
    • Total: 22784
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Chris

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