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

Different Desktop & mobile views


Question

I have a customer after a custom mobile view for their home page.
They want have a totally different background image loaded. Is this possible somehow? I would love some ideas and a solution and happy to work with a third party contractor if needed.

Cheers,

Brent

 

Link to comment

4 answers to this question

Recommended Posts

  • 0

If you want this, you can use this CSS

/* new section background mobile */
@media screen and (max-width:767px) {
	[data-section-id="enter section id here"] {
		background-image: url(https://cdn.pixabay.com/photo/2015/07/09/23/09/cadaques-838724__340.jpg);
		background-size: cover;
		background-repeat: no-repeat;
}
}

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

(This code for SS 7.1. With 7.0, you need to share site url)

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

If it helps, I've found the easiest way is to add 2 sections and hide one on desktop and one on mobile:

/*remove section on desktop only*/
@media screen and (min-width:780px) {
section[data-section-id="xxxxx"]{
    display: none !important;
}
}
/*remove section on mobile only*/
@media screen and (max-width:781px) {
section[data-section-id="xxxxx"] {
    display: none !important;
}
}

 

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