How do I resize a banner image for mobile?

Site URL: https://audreykester.com/omika

Hello!

I attached screenshots to show my issue. The banner image on my page is zoomed up on when viewed on mobile. Although I don't intend to include the entire width on mobile, I do want it to include more of the image like how it is shown on desktop. Can anyone help with the code for this? I've been trying for days and can't figure it out!

Thanks 🙂

I typically just create a specific section to show on mobile so it is designed differently, specific for mobile. Here's how I code it to show one section on desktop and a different section on mobile: https://christyprice.com/blog/show-different-banner-mobile-desktop

hi @christyprice i'm having the same issue

i tried what you shared with the following code:

/* show a different section on desktop vs mobile */

@media only screen and (max-width: 780px) {

    [data-section-id="#block-62f1659304ecdf1b976687fe"] {

            display: none !important;

    }

  }

@media only screen and (min-width: 781px) {

    [data-section-id="#block-36e83b9033b8a5d3fabc"] {

        display: none !important;

    }

  }

and also (in case i was choosing the wrong section id's i also did the collection and page ids and that didn't work either. (i took the double image down for now) can you give any more advice on this? i want my home screen banner to look like this the image below. 

thank you!

Hi @fc1 if you can share a link to your site that would be helpful.

How is this not just a normal feature for squarespace? why would the banner not scale down on mobile ast standard??