Search code examples
csswordpresshtmlresponsive-images

Banner Image not Responsive on Mobile

Original look of the website on mobile

Now, when I apply a css code;

div.masthead-banner.data-bg {

background-size: contain !important;

}

I get this, On the mobile site the full banner appears with a lot of grey space above and below it:

After css fix is applied

However, I would've wanted the image to completely fill the div, is there a way I can achieve this? Thank you.

Website is http://naturessecrets.club

Solution

  • Better to reduce height of banner and make background-size: cover on it.

    .site-title a {
  font-size: 40px;
} 
div.masthead-banner.data-bg {
    background-size: cover !important;
}

    Here is it