Jump to content

Mobile Fallback Image to Display, Not Video

Recommended Posts

On 11/16/2021 at 8:41 AM, michaelpga said:

Site URL: https://www.ridgemontpartners.com.au/

Hello,

I am wanting to have a mobile fallback image displayed only on my mobile site.
On my desktop site, I would like a video to be played, but only for the desktop viewers.

Is this possible?

www.ridgemontpartners.com.au
Version 7.1

Thank you kindly 

Have you tried adding 2 block on your site and hiding the image block/ video block by using breakpoint Css for mobile and desktop?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/18/2021 at 6:46 PM, michaelpga said:

Hello,

No I have not tried this method, could you please describe this a little further for me?

Thanks you

1. Duplicate current video section & move it under video

2. Add Background image for that new seciton

3. Let me know

4. We will give the code to achieve @bangank36 solution

Edited by tuanphan

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

Your site is private now. Can you set it back the protected password?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
15 hours ago, michaelpga said:

 

Kindly show your image + video, i can not see them at the moment. A screenshot and the direct link to them could help us to check your issue

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/22/2021 at 1:07 AM, bangank36 said:

Kindly show your image + video, i can not see them at the moment. A screenshot and the direct link to them could help us to check your issue

Hi @bangank36, 

I have set the site to password protected with the password RMT21*

I have also created the mobile fallback image to display just below the video.

Let me know how you go, thank you

Link to comment
11 minutes ago, michaelpga said:

Hello @bangank36 - just wondering if you'd had the chance to look at this code? Thank you

You can try adding the following codes to Home > Design > Custom Css

@media only screen and (min-width: 768px) {
  section[data-section-id="619c56344f3c3b4a2845ea57"] {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  section[data-section-id="6080f7872281722625d00b04"] {
    display: none;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
24 minutes ago, bangank36 said:

You can try adding the following codes to Home > Design > Custom Css

@media only screen and (min-width: 768px) {
  section[data-section-id="619c56344f3c3b4a2845ea57"] {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  section[data-section-id="6080f7872281722625d00b04"] {
    display: none;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

It worked! You're amazing! Thank you so much for all of your help 🙂

Link to comment
  • 5 months later...

Hello dears, I have the exact same problem, the thing is, I can't seem to find the right ID for the two sections to put into the css snippet. I can find one, but it seems to be the same for both sections. Do you think you could help @bangank36? That would be amazing. 
URL is www.luftmensch-shop.de

 

Edited by Annabanana121
Link to comment
On 5/1/2022 at 4:57 AM, Annabanana121 said:

Hello dears, I have the exact same problem, the thing is, I can't seem to find the right ID for the two sections to put into the css snippet. I can find one, but it seems to be the same for both sections. Do you think you could help

[data-section-id="60017a9dcf953d00a56d497f"]

? That would be amazing. 
URL is www.luftmensch-shop.de

 

Top is

[data-section-id="60017a9dcf953d00a56d497f"]

bottom is

[data-section-id="626db0f9d9e96013fdf7cee8"]

 

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
  • 4 months later...
2 hours ago, asfe said:

Hi, I have the same problem but unfortunately I copy and paste the code above and it doesn't work on my site. Can you help me please? 🙂 

Can you share the link to the page you need to help?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
43 minutes ago, asfe said:

Which page should I check? Have created 2 section (one for video, one for image) yet?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

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.