hellostudiojohn Posted January 17, 2022 Share Posted January 17, 2022 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! Link to comment
Solution tuanphan Posted January 19, 2022 Solution Share Posted January 19, 2022 Remove width: auto !important; from this CSS section[data-section-id="61d06f1e8e186f78e939df7f"] .content-wrapper .sqs-block-image img { width: auto !important; height: 100% !important; } hellostudiojohn 1 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
hellostudiojohn Posted January 25, 2022 Author Share Posted January 25, 2022 Thanks so much for this Tuan, really appreciate your help! Link to comment
hellostudiojohn Posted January 28, 2022 Author Share Posted January 28, 2022 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
tuanphan Posted January 29, 2022 Share Posted January 29, 2022 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
hellostudiojohn Posted January 31, 2022 Author Share Posted January 31, 2022 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 Link to comment
tuanphan Posted February 4, 2022 Share Posted February 4, 2022 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. hellostudiojohn 1 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
hellostudiojohn Posted February 8, 2022 Author Share Posted February 8, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment