Front page Header Only

  • Okay, so I have been all over the Internet tried every single fix I could find to change the front page header to a smaller size. I managed to get rid of the white space gaps, keep the menu stable, ect. However, every fix for the FRONT page header to resize smaller has NOT worked. No matter what options in CSS or the customizer are used, all secondary pages respond to the code, but not the front page.

    I am working in the parent theme (no I do not use child themes).
    Is there a Jquery, Javascript or CSS code that will reduce the size of the image header on the FRONT page only in the parent theme. I need to really reduce the size as it take up to much real estate.

    your can view the site at https://benjaminbiscuitclub.com/wordpress/?preview_id=15&preview_nonce=0d4bc471a5&_thumbnail_id=-1&preview=true

    I am also using the site origins to help with the build process. any help would be appreciated. thanks.

Viewing 1 replies (of 1 total)

  • Hi @snowite

    The code you are looking for is probably ‘.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media’

    so something like this 

    @media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
    height: 50vh;
    max-height: 50vh;

}
}
Viewing 1 replies (of 1 total)
  • The topic ‘Front page Header Only’ is closed to new replies.