Nat-C Posted April 12, 2023 Share Posted April 12, 2023 Hello! So I've got an html code block on the donation page, which loads slowly, but works on desktops & tablets. However, on mobile (at least android, have not been able to test iphone) the block displays WAYY to the right of the rest of the page. When it loads, I have to scroll down and then way to the right to see the donation interface. My coding skills are very limited, but I cannot find in the existing code why it's displaying this way or where one might fix it. Anybody got any suggestions to get it to display in the same scrolling column as the rest of the page? HTML is currently: <iframe src="https://MIurl.cc/laoAzoMmI" frameborder=0 style="width: 1200px; height: 1400px; border: 0;"> Link to comment
Ziggy Posted April 12, 2023 Share Posted April 12, 2023 My first guess is that the problem is with the property in the iframe that makes the width:1200px; which is far wider than any mobile screen. The solution for this is not straightforward as iframes only load the website within the iframe making controlling the view difficult. I would try adding max-width:100%; to the style so at least it doesn't load far too wide. Nat-C 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Nat-C Posted April 12, 2023 Author Share Posted April 12, 2023 16 minutes ago, Ziggy said: My first guess is that the problem is with the property in the iframe that makes the width:1200px; which is far wider than any mobile screen. The solution for this is not straightforward as iframes only load the website within the iframe making controlling the view difficult. I would try adding max-width:100%; to the style so at least it doesn't load far too wide. The way you explain the problem with iframe makes total sense. I tried adding max-width:100% and it did make it narrow-er. However now it's too narrow. (Screenshot attached) Link to comment
Ziggy Posted April 12, 2023 Share Posted April 12, 2023 That's an odd result. iFrames are so problematic! Can you share this page URL so I can have a look? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted April 12, 2023 Share Posted April 12, 2023 Actually, just try this tweak to the iFrame code: <iframe src="https://MIurl.cc/laoAzoMmI" frameborder=0 style="width: 100%; height: 1400px; border: 0;"></iframe> Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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