Jump to content

Full Bleed Image Blocks 50:50 Grey Image and Missing Animation

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://optimum-time-dev-site.squarespace.com

Hi!

I am having a slight issue/bug appear on mobile and desktop after adding some custom-css to make an image block have two images side-by-side and full screen/viewport. 

Please see attached mobile screen view:

Basically the first image is greyed-out in the CMS View and when viewing the website on desktop and mobile. It just fails to appear on page load, then appears finally on page scroll. The 'slide-in' animation I have set globally also fails to transition, I'm guessing this is purely down to the image not appearing?

I've tried a few things in the custom css to target the image block independently but no joy.

Any help or pointers would be much appreciated! And thanks to everyone who helped me get this far by adding custom css fixes to the forum, they have been so helpful in customising the out-of-the-box Squarespace templates.

Oh, password is: OptimumTime

Thanks in advance!

Screenshot 2022-01-17 at 14.43.10.png

Screenshot 2022-01-17 at 14.53.06.png

Link to comment
  • Solution

Remove width: auto !important; from this CSS

section[data-section-id="61d06f1e8e186f78e939df7f"] .content-wrapper .sqs-block-image img {
    width: auto !important;
    height: 100% !important;
}

 

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

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

Hi @tuanphan I'm not sure if you can help me out again? On mobile I'm having a strange glitch effect on-scroll? It's happening to the two full-screen images that you gave me the fix for. The images sort of stretch then reduce to 100% as you scroll, really weird? Would be great to get your eyes over it and see what the bug is. Many thanks in advance! Jon

Link to comment
On 1/29/2022 at 1:19 AM, hellostudiojohn said:

Hi @tuanphan I'm not sure if you can help me out again? On mobile I'm having a strange glitch effect on-scroll? It's happening to the two full-screen images that you gave me the fix for. The images sort of stretch then reduce to 100% as you scroll, really weird? Would be great to get your eyes over it and see what the bug is. Many thanks in advance! Jon

Can you describe in detail? It looks fine

https://www.loom.com/share/ecacfe7982114b8ea37b8da812fc4336

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

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
On 1/31/2022 at 6:03 PM, hellostudiojohn said:

Hi Tuan, thanks for getting back to me on this subject. It looks fine on desktop and within the mobile view in Squarespace but when I view it on an actual mobile device (iPhone) the glitch appears on scroll (only on the homepage and to the first two images). I've attached a quick video showing the issue. I hope it helps? Thanks! Jon

 

OT-Mobile-Glitch-480.mov 3.99 MB · 0 downloads  

 

Hi. I can't help with this, don't have tool to check code on real mobile.

You try posting to Squarespace Customization Resource Group on Facebook to find help.

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

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

I managed to fix this in the end, just incase anyone else experiences a similar issue. It's a bug coming from Squarespace. I pined it down to the 'set focal point' option applied to my images. As I scrolled on mobile the focal point would flicker from central focal point to the focal point I had set for mobile. Weird! 

If anyone else has experience of this issue and knows a work-around or code injection that would help, I'd love to hear more. 

Thanks!

Jon

 

 

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.