Jump to content

How do I resize a banner image for mobile?

Recommended Posts

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


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 🙂

Screen Shot 2022-05-16 at 1.15.44 PM.png

Screen Shot 2022-05-16 at 1.15.57 PM.png

Edited by Colby1126
Link to comment

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

Link to comment
  • 2 months later...

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!



Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.