Support » Theme: Twenty Nineteen » Reducing the Header Image in Twenty Nineteen Theme to at least 50%

  • Resolved dietredthunder

    (@dietredthunder)


    Is there anyway to reduce the image header height by at 50% or more in the Twenty Nineteen theme.

    Can anything suggest a nice bit of CSS I could use or what file to hack.

    It takes up so much screen space IMO and I’m liking the theme so much, so far.

    My site so far as an example:
    http://jomcallister.co.uk/wetpaint

    Best regards,

    DRT

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hello,

    Because you have a featured image it may affect the appearance slightly. Iโ€™m still getting familiar with the Twenty Nineteen theme.

    Nevertheless you can shorten the padding from the top like this:

    @media only screen and (min-width: 768px) {
    .site-header {
        margin: 0;
        padding: 10px 0;
    }
    }

    Paste this code into your Customize CSS box (Customize bar on left). The โ€œ(min-width: 768px)โ€ means that it will affect devices of 768px (iPad) and larger. For mobile devices smaller than iPad it will show the themeโ€™s default responsive settings.

    You can also change the width of smaller devices by adding additional break point code.

    -Chris

    Thank Chris.
    Copied the above code into the CSS, but alas nothing changed :-(.

    I’ve the code in for now in case you want to look.

    Got to pop out now. Will check later.

    Thanks.

    If it’s the featured image, how can one tame that. It takes over the page ๐Ÿ™

    dietredthunder

    (@dietredthunder)

    @chris.

    It does work, but as you say the featured image is a problem.

    Thanks again.

    dietredthunder

    (@dietredthunder)

    Using this:

    .home .entry-header {
    display: none;
    }

    and this.

    @media only screen and (min-width: 768px) {
    .site-header {
    margin: 0;
    padding: 10px 0;
    }
    }

    Still would like a nice header that does not take over the page… the search continues.

    dietredthunder

    (@dietredthunder)

    I’m going back to Twenty Seventeen.

    I liked the look of 2019. But it s not worth the fuss.

    Thanks for your help though ๐Ÿ™‚

    I too would like to be able to make the featured image smaller in the Twenty Nineteen theme.

    I’ve tried the above suggestions but the featured/header images stays the same.

    Any other suggestions?

    I knew that as soon as I posted that I had this same issue I would find an answer. – LOL!

    I just found this CSS that I added to the Additional CSS area under Customizing:

    .site-header.featured-image {
    min-height: 60vh;
    }

    https://wordpress.org/support/topic/featured-images-are-huge-on-desktop/

    It worked perfectly for me.

    Worked for me too – thanks for posting, Ron. It was worth the fuss after all!

    Mark

    Yes it works for the desktop view, but not working for the mobile view even after I put the code inside the brackets for @media only screen and (max-width: 768px)

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