Refresh div vs entire page on window resize

Question

I have some code that doesn't refresh when the window gets resized...so if it's big even if I have the size set to 100% it doesn't auto-adjust. The original solution I thought about was to refresh the content, which definitely works, however on mobile every time I scroll the page up and down the page gets refreshed - so I can't even browse the site. It's more of a nuance than a fix. I was hoping there was a way to tweak what I'm using to just refresh the div instead of the entire page.

The div code I have looks like:

<div class="fb-page" data-href="https://www.facebook.com/woodsyhollow" data-width="800" data-hide-cover="false" data-show-facepile="false"></div>

I can throw an ID on the div, so if there was a way to target this specific div, I think that's all I need.

The code for the refresh looks like:

<script>
    window.onresize = function(){ location.reload(); }
</script>

Any help is appreciated!

Thanks,
Josh

Answer 1

You can use CSS media queries for a simple fix . Try something like;

@media screen and (max-width:600px) {
div data {
width: 200px