Jump to content

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

Recommended Posts

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.?

Screen Shot 2020-11-06 at 12.18.21 PM.png

Screen Shot 2020-11-06 at 12.18.06 PM.png

Link to comment
  • Replies 11
  • Views 481
  • Created
  • Last Reply
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.