Jump to content

Embed Code for Mobile Extra Spacing

Recommended Posts

Hi! I implemented an embedded code for my blog. I was able to resize it for mobile so it appeared balanced since it was too big before. I used this code that I found somewhere else on the forum to fix that. Now the only issue is that I am left with unwanted extra space as you can see in the image attached. How do I resolve this? Thank you.

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1679354939610_11121 div {
    width: 100% !important;
}
}

Screenshot 2023-10-01 at 7.48.38 PM.png

Edited by debbiedesigns
Link to comment
  • debbiedesigns changed the title to Embed Code for Mobile Extra Spacing

It's hard to tell without viewing the page, can you share the page URL?

Have you tried resizing the block on mobile after adding the CSS?

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) 

 Did I help? Buy me a coffee?

Link to comment

I guess the better question is how to make this embed code responsive for both desktop and mobile? It works perfectly on desktop but I'm trying to figure how to resize and fit accordingly on mobile since right now it's too big on mobile.

Here's the code:

<iframe src="https://assets.pinterest.com/ext/embed.html?id=807551776956989408" height="1000" width="600" frameborder="0" scrolling="no" ></iframe>
 
Edited by debbiedesigns
Link to comment

With a fixed height and width value that would explain why there's extra space. iFrames are notorious for being problematic as the iframe does not in itself respond to the contents of the frame, it simply loads it. Is there any way you can have the content on the website rather than embedded?

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) 

 Did I help? Buy me a coffee?

Link to comment

I'm not sure you'll get it looking great, but you can try this adjustment:

<iframe src="https://assets.pinterest.com/ext/embed.html?id=807551776956989408" height="500px" width="95%" frameborder="0" scrolling="no" ></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) 

 Did I help? Buy me a coffee?

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.