My banner image has a ton of space around it. How can I fix it?

[Leannedoja]

I used Canva to resize the image, but if I make it bigger then it makes my banner size bigger, which I don't want. I want the image to take up some of the blank space up around it without making the banner size bigger. There is plenty of room to make the image bigger and use up some of that space. It looks good on mobile (because I got help here). 🙂

Thanks

website is: https://weekendcowgirlboutique.com/#

[Spac-es · Accepted solution]

Add this code in your base.css file:

@media (min-width: 500px) {
  div#Banner-template--16160181223636__image_banner img {
    width: 149%;
    height: 149%;
    transform: translate(0px, -15%);
  }
}
@media (max-width: 499px) {
  div#Banner-template--16160181223636__image_banner img {
    width: 120%;
    height: 120%;
    transform: translate(0px, -7%);
  }
}

The second code is for mobile, I have made the design a little larger on these devices.

Before:

After:

[Leannedoja]

Much better, thanks so much!