Keeping mobile banner the same size

Site URL: https://www.soulfruit.co.uk/

Hi!

is there custom code that we can use so that our banner images on the top of each page don't resize when going into mobile?

Thank you!

50 minutes ago, nw7063 said:

Site URL: https://www.soulfruit.co.uk/

Hi!

is there custom code that we can use so that our banner images on the top of each page don't resize when going into mobile?

Thank you!

Is it the result you want to achieve?

Due to the limited space for heading of banner in mobile, can we just hide it?

Hi! Yes! Although ideally a little more space at the top for the logo?

Thank you so muhc

8 minutes ago, nw7063 said:

Hi! Yes! Although ideally a little more space at the top for the logo?

Thank you so muhc

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="607e7dea4ff0a43308d8722f"] img {
    height: auto !important;
  }

  section[data-section-id="607e7dea4ff0a43308d8722f"] .content-wrapper {
    display: none;
  }
}

Let me know how it works on your site

Kindly describe more detail about your next point of adding more space for logo. Can you share a screenshot of what you intend to?

Will this code keep the same size of all banners for each page when coverting mobile view?

We will be changing all banner images so that the text is already in the image. We want the logo on the mobile view to stay at the top centre of the image and not be placed over the image so you can't see it.

I've attached an example of a banner we are going to upload.

Thanks so much!

The code worked for the homepage - can you help me with all the other pages.

If we could keep the image height too / so that the logo doesn't overlap with the image?

Thank you so much!

3 hours ago, nw7063 said:

The code worked for the homepage - can you help me with all the other pages.

If we could keep the image height too / so that the logo doesn't overlap with the image?

Thank you so much!

Is it what you intend to implement?

Yes this is better - but now there is a little bit too much space - so sorry!

Ideally the Soul Fruit Logo would be in the top third of the image - for all of the banners / pages . Is this possible?

Thank you so so much!