Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


mandelbaummarketing

Question

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 post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0
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

Link to post
  • 0
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!

Edited by mandelbaummarketing
Link to post
  • 0
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

Link to post
  • 0
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...

Link to post
  • 0
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. 

Screen Shot 2020-11-16 at 9.40.59 AM.png

Screen Shot 2020-11-16 at 9.41.10 AM.png

Link to post
  • 0

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

 

Link to post
  • 0
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?

Edited by mandelbaummarketing
Link to post
  • 0
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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...