Resized header image, now showing grey background with Mobile and Tablet views

Hi @stefanie94523,

I see you created this topic a long time ago, but I see you’re still facing this issue, so maybe I can help you here. ??

An option would be to change your existing CSS.

You can go to WP Admin > Appearance > Customize > Additional CSS, then change what you have to the following:

/* Change header format */

.entry-title {
  display: none;
}

@media screen and (min-width: 1024px) {
  .twentyseventeen-front-page.has-header-image .custom-header-media {
      height: 700px;
  }
}

Apart from that, if you use one of the new WordPress default themes (like Twenty Twenty-Three), you would be able to edit this directly from the Site Editor without using any code.

Thanks so much Felipe! I got a Bad Gate error message, but it worked and the mobile view had no more grey bar using your code above.

But the desktop/laptop view switched back to large size again, and the page title and menu bar slide below the fold again. I liked it visible above the fold.

This is the code I had already in my CSS area to resize the desktop/laptop view:

.entry-title {
display: none;
}
.twentyseventeen-front-page.has-header-image .custom-header-media{
height: 700px !important; // set your height
}

Is there code that makes the header image smaller in the desktop view AND eliminates the grey bar in the mobile view?

Thanks,

Stefanie

Hi @stefanie94523!

Sure, always a pleasure.

Basically, the CSS that I sent should do something like that.

It should keep the identical CSS that you had before but apply only when the width is more than 1024px.

It is possible that it is not applying because of the !important there, or because of caching.

Can you try to add the following instead?

/* Change header format */

.entry-title {
  display: none;
}

@media screen and (min-width: 1024px) {
  .twentyseventeen-front-page.has-header-image .custom-header-media {
      height: 700px !important;
  }
}