How to make header image fully responsive

Shouldn’t have closed it. Still not working.

• This reply was modified 2 years, 6 months ago by dsgjax.

Greetings!
I changed this to not resolved…

Do you have a link to view your website? This way I can take a look to see if there is something prohibiting your image from being responsive.

The theme itself is 100% responsive, but sometimes a third-party plugin might cause problems. However, if there is a bug with the theme, I will definitely fix it right away and upload the updated version.

By the way, thank you for the theme comment ??

Best Regards,
Andre

Thanks for looking into this Andre. The site is https://bethperkinscoaching.com

• This reply was modified 2 years, 6 months ago by dsgjax.

No worries…and thanks for the link!
Is it the front page top image that you are referencing too?

So far in my IE Edge, Safari (mobile phone and iPad), plus Firefox, your image is responsive (at least on my end).

The image is set as a background for that container. To make it always fill that area, the image is sized to “cover” the area–which helps with the responsiveness.

Is it still not filling the area for you? If not, perhaps try clearing your browser cache?

Here’s what happens on my iPhone (2nd gen SE). iPhone

It crops from the right to the left. It’s OK on an iPad because there’s more real estate but it’s doing the same thing to a lesser degree.

I see that the container is responsive but if the image doesn’t scale correspondingly then this is where the problem lies, at least for me.

• This reply was modified 2 years, 6 months ago by dsgjax.
• This reply was modified 2 years, 6 months ago by dsgjax.

Duplicate post.

• This reply was modified 2 years, 6 months ago by dsgjax.

I think I know the problem…because the branding container on top of the image is not being used, it’s using large padding that is applied to that empty container.

Try this…copy and paste this into the customizer’s Additional CSS tab and see if this helps solve your image problem?

#site-branding {
    padding: 16%;
}

This will cancel out the following default theme padding:

#site-branding {
    padding: calc(3rem + 12vw) 0;
}

Success! 16% all around cropped the top on big screens but adjusting for that fixed it. Thank you!

`#site-branding {
padding: 20% 16% 16% 16%
}

Good to hear ??
However, if you want this to be more responsive based on screen size, you can do this code for various devices:

#site-branding {
   padding: 20% 16% 16% 16%;
}
@media (min-width: 992px) {
 #site-branding {
    padding: calc(3rem + 12vw) 0;
 }
}

What that code does, is that on smaller screens, it will use your custom padding. Then, if your website is viewed on a screen that is 992px wide or larger, it will use the default padding values.

However, if what you did works for you, then you can leave it as it is.

Best Regards,
Andre

Using that code and your original, straight 16% works perfectly on all sizes.

Thanks Again Andre.

Dave