Customizing Mobile View of On-Page Content (i.e., Banner Photo)

Site URL: https://sunfish-bobcat-m5pn.squarespace.com/

My client wants to use a specific image as the banner for our homepage, but doesn't like how it looks on mobile. I can't figure out how to either change mobile-only settings for this or anything else (other than the site header design). We'd be fine replacing the photo for the mobile version, or using a different part of the same photo. Is there a way to do this in Settings, with CSS, etc.?

In other words, is there a way to make mobile-only edits???

On 11/8/2020 at 12:15 AM, mandelbaummarketing said:

In other words, is there a way to make mobile-only edits???

You can add 2 sections, then we can give the code to hide 1 on desktop, hide 1 on mobile

3 hours ago, tuanphan said:

You can add 2 sections, then we can give the code to hide 1 on desktop, hide 1 on mobile

wow, is that the only option? what is the code to hide one on desktop and one on mobile? thanks so so much!

15 hours ago, mandelbaummarketing said:

wow, is that the only option? what is the code to hide one on desktop and one on mobile? thanks so so much!

You can add 2 sections first, then share url again, we can check code easier

On 11/11/2020 at 5:01 AM, tuanphan said:

You can add 2 sections first, then share url again, we can check code easier

2 sections have been added to the homepage. Please advise on code to hide. Thanks!!!

11 hours ago, mandelbaummarketing said:

2 sections have been added to the homepage. Please advise on code to hide. Thanks!!!

Can you take a screenshot? I see 1 section here...

On 11/14/2020 at 2:49 AM, tuanphan said:

Can you take a screenshot? I see 1 section here...

please see attached. the first screenshot is the beginning of the original section that should only be on desktop. the second screenshot is the beginning of the duplicate that should only be on mobile. 

Add to Home > Design > Custom CSS

/* hide section on desktop */
@media screen and (min-width:768px) {
[data-section-id="5faee2e6dd1d4d0520109855"] {
    display: none;
}
}
/* hide section on mobile */
@media screen and (max-width:767px) {
[data-section-id="5f98581e4854fb4aa0ee9ca9"] {
	display: none;
}
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

/* hide section on desktop */
@media screen and (min-width:768px) {
[data-section-id="5faee2e6dd1d4d0520109855"] {
    display: none;
}
}
/* hide section on mobile */
@media screen and (max-width:767px) {
[data-section-id="5f98581e4854fb4aa0ee9ca9"] {
	display: none;
}
}

 

thanks! where do i find the data section ID, so i can do this on other pages too??? Is there any way to do it other than viewing the source code?

22 minutes ago, mandelbaummarketing said:

thanks! where do i find the data section ID, so i can do this on other pages too??? Is there any way to do it other than viewing the source code?

Use this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

2 hours ago, tuanphan said:

Use this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

thank you!