Header, images and background

Hi, and thaks for a great theme :slight_smile: I’m having some issues. Header image is ok for PC but with mobile devices theres a growing backgroud space and my header image reduces a lot. What can i do?

Thanks for helping!

Hi,

Can you share your site URL here? so I can check it directly.

Regards,
Awan

Thanks!

I can but it’s still a draft, can I email you login and pw?

Isabel

yup, you can send a private message to my account here.

Hi, I am wondering if this problem was ever solved? I have the exact same issue. My header is displaying perfectly on desktop and laptop but no luck with any mobile views.

Kind Regards
Johann

Hi @Johann,

Can you share your site URL here?

Hi Awan,

Thank you for getting back to me. The URL is http://4ucrafts.co.za/.

The theme is great and really works well with the niche so I hope it can be sorted.

Hi,

Please try to put these CSS code below into: Customize > additional CSS.

@media screen and (max-width: 500px){
  .site-header:after {
    background-size: 100% 25%;
    background-position: 100% 60px;
  }
  .has-banner .site-branding {
    padding-bottom: 45px;
  }
}

@media screen and (max-width: 736px){
      .site-header:after {
        background-size: 100% 45%;
        background-position: 100% 60px;
      }
      .has-banner .site-branding {
        padding-bottom: 45px;
      }
}

@media screen and (max-width: 768px){
      .has-banner .site-branding {
        padding-bottom: 85px;
      }
}

Hope it works.

Regards,
Awan

Hi Awan,

Thank you very much, all is good now. I had to change the sizes a little to fit it nicely on tablet and mobile.

@media screen and (max-width: 500px){
.site-header:after {
background-size: 100% 27%;
background-position: 100% 20px;
}
.has-banner .site-branding {
padding-bottom: 10px;
}
}
@media screen and (max-width: 736px){
.site-header:after {
background-size: 100% 27%;
background-position: 100% 15%
}
.has-banner .site-branding {
padding-bottom: 1px;
}
}

@media screen and (max-width: 768px){
.has-banner .site-branding {
padding-bottom: 48px;
}
}

But thanks again, it looks good now.

Kind Regards
Johann