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

Site URL: https://www.stuffbystink.com/cereal-by-stink

password for my website is: swagger

the web view is completely fine, but the mobile view cuts it off.

i just tried a bunch of custom CCS codes from another forum post, but nothing worked.

can anyone help? thanks! 😄

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

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.

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

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?

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