Stop Mobile Fallback Image From Showing on Desktop

On 1/12/2021 at 12:08 AM, tuanphan said:

Add to History Page Header

<style>
  @media screen and (min-width:992px) {
  #page section:first-child img {
    visibility: hidden;
}
  }
</style>

This works but also takes away the image I have on my page. Anyway to work around this?

On 3/17/2021 at 1:49 AM, ryanbeale said:

 

Can you share page url? We can check easier

Hi,

I've added this code on the header 

  <style>
  @media screen and (min-width:992px) {
  #page section:first-child img {
    visibility: hidden;
}
  }
</style>

this is ok for not showing the Fallback Image on desktop, but all the covers on my portfolio page have disappeared as some slideshows. Also I don't understand why while loading the content the backgorund color of video's section is grey while I set the background color black on the style section of squarespace.

the page is: 

https://www.paesaggisensibili.org/work/powerscape

password: landscapes

thank you

ok I have figuerd out how to target the specific section with CSS:

@media screen and (min-width:992px) {
  section[data-section-id="6108207bad85b32d4f272a0b"]:first-child img {
    visibility: hidden;}}

not very handy as I have to manually do this for every section...

Still unsolved the background color while the video is loading...should be black but it is gray

On 8/10/2021 at 6:47 PM, paesaggisensibili said:

ok I have figuerd out how to target the specific section with CSS:

@media screen and (min-width:992px) {
  section[data-section-id="6108207bad85b32d4f272a0b"]:first-child img {
    visibility: hidden;}}

not very handy as I have to manually do this for every section...

Still unsolved the background color while the video is loading...should be black but it is gray

Try this code

section[data-section-id="6108207bad85b32d4f272a0b"] .section-background {background-color: black !important;}

Hi, 

thank you, at the end I solved with a plugin that is working great 

@rwpThis worked in preventing from loading the fallback image first on desktop. However, when I test in Mobile, the fall back image is all distorted. The fallback image is enabled through the block background option. Here's a screenshot of the code injection on the header-

Here's how the fallback image is enabled-

I have a feeling I need to be explicit of the fall back image in the code injection but I am not sure how or what. I am not a coder by any means.

Thanks in advanced.

14 hours ago, javierdiaz1910 said:

@rwpThis worked in preventing from loading the fallback image first on desktop. However, when I test in Mobile, the fall back image is all distorted. The fallback image is enabled through the block background option. Here's a screenshot of the code injection on the header-

Here's how the fallback image is enabled-

I have a feeling I need to be explicit of the fall back image in the code injection but I am not sure how or what. I am not a coder by any means.

 

Thanks in advanced.

Can you share link to your site? We can check easier

6 hours ago, tuanphan said:

Can you share link to your site? We can check easier

@tuanphan The site is https://www.donalbertocoffee.com, password is titkos9jelszo

Once you look at the desktop version, feel free to open it via mobile. You'll see that the image is distorted/pixelate but it is actually focusing on the left upper corner. If you go landscape, you'll see the entire image correctly, and if you go back to portrait, the actual fallback image is correctly displayed as well. Weird. 

Also, for whatever reason, the browser mobile option doesn't quite ilustrate the issue, which is why I suggested logging directly through a mobile device.

Thanks in advance.

@tuanphan Any chance you guys looked at this?

On 11/15/2021 at 10:07 PM, javierdiaz1910 said:

@tuanphan The site is https://www.donalbertocoffee.com, password is titkos9jelszo

Once you look at the desktop version, feel free to open it via mobile. You'll see that the image is distorted/pixelate but it is actually focusing on the left upper corner. If you go landscape, you'll see the entire image correctly, and if you go back to portrait, the actual fallback image is correctly displayed as well. Weird. 

Also, for whatever reason, the browser mobile option doesn't quite ilustrate the issue, which is why I suggested logging directly through a mobile device.

Thanks in advance.

Hi,

Password incorrect. Can you check it again?

It looks like @squarespace has not resolved this one yet. I am seeing this in my project and it is a tough one to work around. I will try the above code fix. @squarespace, please fix this!

On 3/4/2022 at 9:24 PM, adamchernick said:

It looks like @squarespace has not resolved this one yet. I am seeing this in my project and it is a tough one to work around. I will try the above code fix. @squarespace, please fix this!

If you share link to your site, we can give a simple code to fix this