Header is not responsive on other devices

Hi,

The theme has more than 1000 active installs and I never had an issue with the theme not being responsive – it seems you are using an image near the menu is that something you have customized on the theme? I can have a look if you share your URL.

Thank you

Due to the lack of response, I will close now this topic although you can always contact me back by open a new request.

Hi, could you please re-open this, I am having the same issue. The header image looks fine on desktop but on mobile it’s only showing a fraction of it. https://inthisbeautifulworld.com

thank you

Hi @sarahdenhof

Did you follow the instructions in how to add a “Header Image”?

Nuno

Do you mean these instructions?

Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header size of 1050 × 118 pixels — you’ll be able to crop your image once you upload it for a perfect fit.

If so, yes.

They don’t tell me anything about the header on a mobile device though. That is what I’m inquiring about.

Hi @sarahdenhof

Your image looks higher than 118px, try to change it accordingly to the instructions and see how does it look. Anyway I will try to make that function bulletproof on the next update.

Best,
Nuno

I did try cropping it to be shorter and it didn’t make any useful difference on mobile. Still looks like it’s showing just a thumbnail of the header.

Thank you for trying that.

Below is a quick fix for this issue you just need to follow the steps:

– Login to your wp-admin
– Click on the menu item Appearance
– Click on the menu item Customize
– Click “Additional CSS”
– Copy the code below and past it to your “Additional CSS” function

@media only screen and (max-width: 600px) {
  .header-image {
    margin: 25px 0px 0em !important;
    background-size: contain !important;
    margin-top: 50px;
  }
}

Please let me know if that fixed – after adding the code you may need to clear your browser cache.

• This reply was modified 4 years, 10 months ago by Nuno Sarmento.

@sarahdenhof

You may want also to fix the mobile padding between the text and the background colour that you setup.

@media only screen and (max-width: 600px) {
 article {
    padding: 15px;
 }
}

• This reply was modified 4 years, 10 months ago by Nuno Sarmento.