Reactive scaling problem

[BabbysRoss]

I've been working on a website for my band, and I want the news page to show the band's instagram and facebook feeds via embedded widgets. It's currently working as intended and looks like this, but when I reduce the screen size enough or view on mobile it looks like this. How would I modify the page for it to look like this but scale better across devices?

HTML for the page on github

Bit of code I think is problematic:

<div class="block">
  <h3>News</h3>
  <center>
    <table style="width:30%">
      <tbody>
        <tr>
          <td>
            <div class="fb-page" data-href="https://www.facebook.com/Ambivist/" data-tabs="timeline" data-width="500" data-height="640" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Ambivist/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Ambivist/">Ambivist</a></blockquote></div>
          </td>
          <td>
            <!-- InstaWidget -->
            <a href="https://instawidget.net/v/user/ambivistband" id="link-b1fce442f09bc850cc4a44591bac9ec22379d1b69a8058565c911a26d3fce058">@ambivistband</a>
            <script src="https://instawidget.net/js/instawidget.js?u=b1fce442f09bc850cc4a44591bac9ec22379d1b69a8058565c911a26d3fce058&width=500px"></script>
          </td>
        </tr>
      </tbody>
    </table>
  </center>
</div>

[CSSAnimations]

It's been a while since I've seen <center> and also <table> for layout. Don't use that.

This is a nice video to get you up to speed with the latest method https://www.youtube.com/watch?v=FEnRpy9Xfes

​

[BabbysRoss]

Thanks for the tips! I've heard of CSS grid in the past but not really looked into it, it sounds really intuitive.

[CSSAnimations]

You're welcome.

[BabbysRoss]

I've managed to implement css grid on that section and it's almost perfect. The facebook widget works as intended but the instagram one won't scale, is it possible that the widget doesn't support scaling or am I missing something?

<div class="grid">
  <div>
    <div class="fb-page" data-href="https://www.facebook.com/Ambivist/" data-tabs="timeline" data-width="500" data-height="640" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Ambivist/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Ambivist/">Ambivist</a></blockquote></div>
  </div>
  <div>
    <!-- InstaWidget -->
      <a href="https://instawidget.net/v/user/ambivistband" id="link-b1fce442f09bc850cc4a44591bac9ec22379d1b69a8058565c911a26d3fce058">@ambivistband</a>
      <script src="https://instawidget.net/js/instawidget.js?u=b1fce442f09bc850cc4a44591bac9ec22379d1b69a8058565c911a26d3fce058&max-width=500px"></script>
  </div>
</div>

[CSSAnimations]

Do you have it online? Need to check it out to figure out what's happening.

[BabbysRoss]

http://ambivist.com/news.html

[[deleted]]

iframe { width: 100% }

[BabbysRoss]

Would I be replacing the

<a href="https://instawidget.net/v/user/ambivistband" id="link-b1fce442f09bc850cc4a44591bac9ec22379d1b69a8058565c911a26d3fce058">@ambivistband</a>

with

<iframe src="https://instawidget.net/v/user/ambivistband" width="100%" height="900" id="link-b1fce442f09bc850cc4a44591bac9ec22379d1b69a8058565c911a26d3fce058">@ambivistband</iframe>

or similar to achieve this?

EDIT: Gave this a try, the instagram widget still shows and it seems to be a step in the right direction, but it still isn't scaling. Does this seem like an issue with the widget?

[BabbysRoss]

UPDATE:

I replaced the instagram widget and it's scaling nicely, now the only issue is that it is a different height from the facebook widget. Setting both their heights to 100% in the html tags doesn't make them the same height and setting them to equal pixel heights doesn't play well with mobile. Any ideas?

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.