Responsive full width header image

  • Hi all,

    I am using the Blossom Chic theme and trying to add a header image / logo. It’s size is 1980×427, so I added some padding to the header box with custom CSS. This all works fine on pc, but on mobile, the header image is not responsive. Any suggestions on how to make it 100% width instead of a fixed number of pixels? I think this should not be too hard…

    Thanks!
    Luuk

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @luukie25,

    You can add the below code in Additional CSS via Admin Dashboard > Appearance > Customize > Additional CSS to make the banner image appear full-width in mobile view:

    @media screen and (max-width: 767px) {
    .banner img {
        object-fit: contain;
        height: unset;
    }
    .site-title {
        font-size: 42px;
    }
}

    If you have any other queries then please feel free to write to us.

    Kind regards!

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive full width header image’ is closed to new replies.