Jump to content

banner cuts off in mobile view - none of the codes have worked! :(

Go to solution Solved by Caroline_Smith,

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

There's not really a great way to modify the background image with CSS, but a common solution for this issue is to create one desktop section (which you have already done), and then another section right below it that will have a mobile-friendly image (you'll need to create a mobile version for the attached image). Then, you can use CSS to hide and show the appropriate section on desktop and mobile. Here is the code snippet for that. You'll need to know how to find your page section IDs so that you can replace them in the below snippet:

  /* Mobile Screen Size */
  @media(min-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: none;
    }
  }

  /* Desktop Screen Size */
  @media(max-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: block;
    }
    [data-section-id='{DESKTOP_ID_GOES_HERE}'] {
      display: none;
    }
  }

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment
21 hours ago, Caroline_Smith said:

There's not really a great way to modify the background image with CSS, but a common solution for this issue is to create one desktop section (which you have already done), and then another section right below it that will have a mobile-friendly image (you'll need to create a mobile version for the attached image). Then, you can use CSS to hide and show the appropriate section on desktop and mobile. Here is the code snippet for that. You'll need to know how to find your page section IDs so that you can replace them in the below snippet:

  /* Mobile Screen Size */
  @media(min-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: none;
    }
  }

  /* Desktop Screen Size */
  @media(max-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: block;
    }
    [data-section-id='{DESKTOP_ID_GOES_HERE}'] {
      display: none;
    }
  }

 

Hi Caroline 🙂

 

Thankyou so much for this! Super helpful.

What do you mean by 'page section IDs'?

Thanks,

Isobel

Link to comment
16 minutes ago, isobeleastwood said:

Hi Caroline 🙂

 

Thankyou so much for this! Super helpful.

What do you mean by 'page section IDs'?

Thanks,

Isobel

In Squarespace 7.1 templates, every section that you add to your page has an id. It will look something like what's pictured. There are a 2 ways you can find page section IDs:

If you use Chrome, you can use the Squarespace ID Finder Extension.

If you use a browser other than Chrome (Firefox, Safari, etc.), there are a lot of blog posts that explain how to do that and even some helpful videos. Here's a blog post I wrote that explains how to find a page section IDs in any browser.

If you still need help finding it, I can give you the IDs if you just go ahead and add the mobile-friendly page section to your site.Screenshot_110.thumb.png.f39e04782b007f1133a51eaf805d32d0.png

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment
On 3/2/2022 at 11:18 AM, Caroline_Smith said:

There's not really a great way to modify the background image with CSS, but a common solution for this issue is to create one desktop section (which you have already done), and then another section right below it that will have a mobile-friendly image (you'll need to create a mobile version for the attached image). Then, you can use CSS to hide and show the appropriate section on desktop and mobile. Here is the code snippet for that. You'll need to know how to find your page section IDs so that you can replace them in the below snippet:

  /* Mobile Screen Size */
  @media(min-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: none;
    }
  }

  /* Desktop Screen Size */
  @media(max-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: block;
    }
    [data-section-id='{DESKTOP_ID_GOES_HERE}'] {
      display: none;
    }
  }

 

this really helped! finally got it. for anyone else interested. 

thanks so much Caroline! all the best xx

Link to comment
  • 1 month later...
On 3/2/2022 at 8:18 AM, Caroline_Smith said:

There's not really a great way to modify the background image with CSS, but a common solution for this issue is to create one desktop section (which you have already done), and then another section right below it that will have a mobile-friendly image (you'll need to create a mobile version for the attached image). Then, you can use CSS to hide and show the appropriate section on desktop and mobile. Here is the code snippet for that. You'll need to know how to find your page section IDs so that you can replace them in the below snippet:

  /* Mobile Screen Size */
  @media(min-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: none;
    }
  }

  /* Desktop Screen Size */
  @media(max-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: block;
    }
    [data-section-id='{DESKTOP_ID_GOES_HERE}'] {
      display: none;
    }
  }

 

This is awesome, and helped me so much!! But.. is there a way to make this work with the main blog page, since the blog page can't be duplicated?

Link to comment
On 4/13/2022 at 10:41 PM, ponby said:

This is awesome, and helped me so much!! But.. is there a way to make this work with the main blog page, since the blog page can't be duplicated?

What is your problem + Site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.