I've been experimenting with using if else statements to achieve a simple task, but I'm struggling to reverse the wrapping of boxes after resizing the window above 650px.
The goal is to have the boxes wrapped in a div when the window width is below 650px and then unwrapped once the window is resized above 650px.
Any suggestions on how I can accomplish this?
$(window).resize(function() {
if ($(window).width() < 650)
$('.box').wrap("<div class='boxwrap'><div/>")
});
$(window).resize(function() {
if ($(window).width() > 650)
$('.box').unwrap("<div class='boxwrap'><div/>")
}); #cat-area {
width: 100%;
display: inline-block;
text-align: center;
background-color: red;
}
#cat-container {
background-color: yellow;
width: 92.5%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.box {
display: inline-block;
width: 20%;
height: 20%;
max-height: 300px;
max-width: 300px;
min-height: 100px;
min-width: 100px;
padding: 1%;
background-color: #d7d7d7;
}
@media only screen and (max-width: 650px) {
#cat-area {
width: 100%;
display: block;
text-align: center;
background-color: red;
}
#cat-container {
background-color: blue;
width: 92.5%;
display: block;
}
.box {
position: relative;
display: block;
margin: 4px 0px;
}
.boxwrap {
background-color: #d7d7d7;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cat-area">
<div id="cat-container">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
</div>
</div>