Center a block

Is it possible to center these blocks on mobile view so they are not left aligned?

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.

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>
 

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. 

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?