I am encountering an issue where the right-column1 does not move under the left-column1 when the screen size is limited for both to display side by side. I have tried various overflow options and media queries, setting them to 100% when the browser or device cannot accommodate both columns horizontally, but the right column still overlaps the left one without shifting down as desired. This used to work flawlessly a few weeks ago, so I suspect that I may have unintentionally modified something in my code.
The setup involves the left column containing an image and the right column holding a link, but this configuration also fails to function properly.
Could it be that I am overlooking something in my code?
<div class="container1">
<div class="left-column1">
<p class="title">More Wallpapers</p>
<div id="wn">
<div id="lyr1">
<div id="inner1">
</div>
</div>
</div> <!-- end wn div --></div>
<div class="right-column1"><div class="fb-facepile" data-href="https://www.facebook.com/Techagesite.Free.Mobile.Wallpapers" data-action="like" data-width="200" data-height="64" data-max-rows="2" data-colorscheme="dark" data-size="medium" data-show-count="true"></div></div>
</div>
.container1 {
width: 100%;
}
.left-column1 {
width: 50%;
float:left;
}
.right-column1 {
width:50%;
float:left;
}