meganntab Posted March 2, 2021 Share Posted March 2, 2021 Site URL: http://www.facilibuildhub.com/ How can I size a code block for mobile? The video on my site is embedded as a code - we didn't want the suggested videos to pop up at the end and I found a tutorial for getting rid of them, which involved embedding it as code. However, the video remains full size on the mobile version and throws off the entire site display. Any tips for how to fix this? Beyondspace 1 Link to comment
Solution Beyondspace Posted March 3, 2021 Solution Share Posted March 3, 2021 14 hours ago, meganntab said: Site URL: http://www.facilibuildhub.com/ How can I size a code block for mobile? The video on my site is embedded as a code - we didn't want the suggested videos to pop up at the end and I found a tutorial for getting rid of them, which involved embedding it as code. However, the video remains full size on the mobile version and throws off the entire site display. Any tips for how to fix this? Try this custom css @media screen and (max-width: 767px) { #block-yui_3_17_2_1_1614718295210_14318 { width: 100% !important; padding: 0 !important; } #block-yui_3_17_2_1_1614718295210_14318 .sqs-block-content { width: 100%; padding-top: 56%; height: 0; } #block-yui_3_17_2_1_1614718295210_14318 .sqs-block-content iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; } } tuanphan and meganntab 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
meganntab Posted March 17, 2021 Author Share Posted March 17, 2021 That worked, thanks! Beyondspace 1 Link to comment
meganntab Posted April 6, 2021 Author Share Posted April 6, 2021 Revisiting this conversation as I've run into a new problem - the code works great for changing the size of the video and doing what I need it to do, but I've now realized it's interfering with the site's responsive design. On this page, if you minimize the window, you'll notice that the code block runs into the side bar and everything is overlapping. Any idea how to fix this? FaciliBuild HUB — FaciliBuild Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 On 4/7/2021 at 2:50 AM, meganntab said: Revisiting this conversation as I've run into a new problem - the code works great for changing the size of the video and doing what I need it to do, but I've now realized it's interfering with the site's responsive design. On this page, if you minimize the window, you'll notice that the code block runs into the side bar and everything is overlapping. Any idea how to fix this? FaciliBuild HUB — FaciliBuild Add this CSS /* fix video overlap sidebar */ div#block-yui_3_17_2_1_1614718916914_14873 iframe { width: 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
meganntab Posted April 12, 2021 Author Share Posted April 12, 2021 15 hours ago, tuanphan said: Add this CSS /* fix video overlap sidebar */ div#block-yui_3_17_2_1_1614718916914_14873 iframe { width: 100% !important; } That worked - thank you! Beyondspace 1 Link to comment
Pinnaql3 Posted April 30 Share Posted April 30 I'm having a similar issue with HTML code. It's fine on the desktop version. But it's too wide for the mobile version. https://theoutsideleverage.com/articles/from-hope-to-heartbreak-how-sean-tuckers-heart-condition-forced-him-to-go-undrafted-in-the-2023-nfl-draft Link to comment
tuanphan Posted May 1 Share Posted May 1 18 hours ago, Pinnaql3 said: I'm having a similar issue with HTML code. It's fine on the desktop version. But it's too wide for the mobile version. https://theoutsideleverage.com/articles/from-hope-to-heartbreak-how-sean-tuckers-heart-condition-forced-him-to-go-undrafted-in-the-2023-nfl-draft It looks fine to me 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment