Travis_Ampersand Posted June 6, 2023 Share Posted June 6, 2023 I have a bookings page set up through Outlook and would like to have it appear correctly on the mobile version. The desktop version seems fine but the mobile version is cutoff quite a bit and very difficult to navigate. This is the code that I am currently using: <iframe src="https://outlook.office.com/bookwithme/user/61af79c8aef94946a0589f61fd7b7234%40LongandFoster.com/meetingtype/lAuxNDmwo028U_MGCos0fw2?anonymous" scrolling="no" width="1100" height="800" frameborder="0"> </iframe> Link to comment
Ziggy Posted June 6, 2023 Share Posted June 6, 2023 Change width to 100%. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Travis_Ampersand Posted June 6, 2023 Author Share Posted June 6, 2023 @Ziggy Thank you for the response. The mobile version still looks incorrect. Any other suggestions? https://teal-smilodon-2ljx.squarespace.com/appointments Link to comment
Ziggy Posted June 7, 2023 Share Posted June 7, 2023 The contents of the iframe aren't acting responsively, it's one of the main problems with iframes. Honestly though if you load the booking page in it's own window on mobile it isn't responsive, so there's not much you can do to improve it. https://outlook.office.com/bookwithme/user/61af79c8aef94946a0589f61fd7b7234%40LongandFoster.com/meetingtype/lAuxNDmwo028U_MGCos0fw2?anonymous Travis_Ampersand 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Travis_Ampersand Posted June 8, 2023 Author Share Posted June 8, 2023 @Ziggy would there be a way to shrink the entire "appointments" block on mobile so that it fits the space? I know this would make all of the text teeny tiny, but wanted to compare my options. Link to comment
JayVanDyke Posted June 8, 2023 Share Posted June 8, 2023 @Travis_Ampersandsince the content is inside an iframe there's literally nothing you can do to make the content inside change at all. Ziggy 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
Travis_Ampersand Posted June 13, 2023 Author Share Posted June 13, 2023 @jaeveedee One more thought, is there a way that I can hide the appointments page only on the mobile site? Link to comment
JayVanDyke Posted June 13, 2023 Share Posted June 13, 2023 Yea something like this might work to remove it from navigation but if you have buttons in other places that will need to be hidden too. .header-menu [data-folder="/sendamessage-folder/"] .header-menu-nav-item:last-child { display: none; } Travis_Ampersand 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
Travis_Ampersand Posted June 13, 2023 Author Share Posted June 13, 2023 @jaeveedee Thank you! It appears to have worked. 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