Jump to content

Recommended Posts

Since it's an iframe, you need to make sure the code block is full width, and add margin:0 auto; and display:block; to the iframe style.

This iframe is causing a mobile issue as it's too big on smaller screens.

image.png.b4fbe64f7245cae4dc5d060195837b53.png

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Not sure how to do that. I did verify the code block and it's adjusted to full width now. Here is the code block for the picture you sent above:

 <div class="mnd-rates-widget" style="width: 500px; height: 340px; font-size: 12px; ">
    <div class="w-header" style="text-align: center; padding:4px 0;background-color: #666867; color: #FFFFFF;"> <a href="https://www.mortgagenewsdaily.com/mortgage-rates" target="_blank" style="color: #FFFFFF;text-decoration:none;">Today&#x27;s Mortgage Rates</a></div>
    <iframe src="//widgets.mortgagenewsdaily.com/widget/f/rates?t=large&sn=true&c=666867&u=&cbu=&w=498&h=290" width="500" height="290" frameborder="0" scrolling="no" style="border: solid 1px #666867; border-width: 0 1px;box-sizing:border-box;width:500px;height:290px;display:block;"></iframe>
    <div class="w-footer" style="text-align: center; padding:4px 0;background-color: #666867; color: #FFFFFF;">View More <a href="https://www.mortgagenewsdaily.com/mortgage-rates" target="_blank" style="color: #FFFFFF;text-decoration:none;">Refinance Rates</a></div>
  </div>
 

Link to comment
14 hours ago, madseason said:

style="width: 500px;

That line means that the width is 500px, so on a screen narrower than 500px it gets cut off or the pages scales and leaves the other content with a large right margin.

iFrames are pretty rubbish, but you can sometimes get them to work with max-width:100%; or set the width to 100% and a max width of 500px. Usually takes some trial and error to get right. 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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.