Header Image on Mobile

Hi There,

First of all this is an excellent theme. Development team: Great job!

I just have a quick question about the header image on mobile. For default on mobile the image comes with a zoom and that works great for many websites but for mine the BG image looks distorted. Is there any way to control the zoom only for small devices.


I appreciate it.




Add this to a custom CSS plugin and play with the height setting:

@media only screen and (max-width: 600px) {
  #header-banner {
      min-height: 50%;
  #header-banner {
      background-size: contain !important;

Thank you Vlad.

I will give it a try and get back to you!

Appreciate it!


It controls the height on mobile but not the zoom. The idea is to have a clear image on the background the same way I have on the contact section. Any other suggestion?

Thanks again.

Yeah, the contain part is being overwritten. Change #header-banner to this #header-banner.parallax.

It worked great! Many Thanks!