madseason Posted January 5 Share Posted January 5 (edited) Is it possible to center these blocks on mobile view so they are not left aligned? Edited January 12 by madseason Link to comment
Ziggy Posted January 5 Share Posted January 5 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. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
madseason Posted January 5 Author Share Posted January 5 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'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
Ziggy Posted January 6 Share Posted January 6 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. madseason 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
madseason Posted January 6 Author Share Posted January 6 Thank you! I will experiment. If I can figure out a workable option for mobile, when I change that code under the mobile view, won't it also change how it looks on the desktop view? If so, how do I only impact the mobile view? 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