The blue color row-based list (the divs inside a div with id phrase) is not breaking on the next line based on the screen size. I am wondering what additional changes I need to make in the following CSS to accomplish this.
#phrase {
color: #fff;
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
margin: 2rem 0;
}
Here is my code snippet:
$(".words").draggable({
revert: function (event, ui) {
var bRevertingPhrase = this.closest("#drop-em");
if (!bRevertingPhrase.length) {
var phraseID = $(this).data("id");
var phraseHomeID = $(this).parent().data("id");
//If the child and parent ids don't match, we move the child to the correct parent
if (phraseID !== phraseHomeID) {
var correctCell = $("#phrase").find("div[data-id='" + phraseID + "']");
correctCell.prepend(this);
}
}
return !event;
}
});
$("#drop-em > div").droppable({
drop: function (ev, ui) {
$(ui.draggable)
.detach()
.css({ top: 0, left: 0 })
.appendTo($(this).find(".content:empty"));
}
});
$("#phrase > div").droppable({
drop: function (ev, ui) {
$(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
}
});
const myButton = document.querySelector("#move-text");
myButton.addEventListener("click", () => {
fill();
});
function fill() {
const cells = document.querySelectorAll("#phrase > div > span");
var destination = 0;
var newLoc = "";
cells.forEach((cell, index) => {
newLoc = document.querySelector(
".item:nth-child(" + cell.dataset.destination + ") .content ");
newLoc.append(cell);
newLoc.classList.add("moved");
});
} html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
counter-reset: columnCount 1 alphaCount;
}
h1 {
text-align: center;
}
.wrap {
display: flex;
gap: 2rem;
}
.grid {
margin: auto;
display: grid;
flex: 1 0 0;
grid-template-columns: repeat(12, 1fr);
padding-top: 1.5rem;
}
.item {
position: relative;
background-color: #f9f9f9;
border: 1px solid grey;
aspect-ratio: 1/1;
counter-increment: columnCount;
min-width: 0;
transition: background 1s ease;
}
.item:nth-of-type(12n + 1) {
counter-increment: alphaCount;
}
.item:nth-of-type(12n + 1)::before {
content: counter(alphaCount, upper-alpha);
position: absolute;
display: flex;
align-items: center;
top: 0;
bottom: 0;
left: -1.75rem;
color: red;
pointer-events: none;
}
.item:nth-of-type(n + 13)::after {
display: none;
}
.item::after {
content: counter(columnCount);
position: absolute;
left: 0;
right: 0;
text-align: center;
top: -1.75rem;
color: red;
pointer-events: none;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
overflow: auto;
color: #000;
padding: 1rem;
word-wrap: break-word;
}
.words {
cursor: move;
transition: padding 0.5s ease;
}
.content:has(.ui-draggable-dragging) {
overflow: visible;
}
.ui-droppable-active .content {
overflow: visible;
}
.words.ui-draggable-dragging {
background: blue;
padding: 5px 10px;
border-radius: 6px;
z-index: 999;
color: #fff;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
}
#phrase {
color: #fff;
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
margin: 2rem 0;
}
#phrase>div {
margin: 0 10px 10px;
padding: 5px 10px;
background: #007bff;
border: 2px solid #007bff;
border-radius: 6px;
color: #fff;
min-width: 100px;
}
#phrase>div:empty {
background: #fff;
border-style: dashed;
padding: 0px 25px;
min-height: 30px;
}
.moved {
animation: fade 3s ease;
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
background: red;
}
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="phrase">
<div data-id="1"><span data-id="1" data-destination="85" class="words">(Sq#1)</span></div>
<div data-id="2"><span data-id="2" data-destination="86" class="words"> (Sq#2)</span></div>
<div data-id="3"><span data-id="3" data-destination="87" class="words"> (Sq#3)</span></div>
<div data-id="4"><span data-id="4" data-destination="88" class="words">(Sq#4)</span></div>
<div data-id="5"><span data-id="5" data-destination="89" class="words">(Sq#5)</span></div>
<div data-id="6"><span data-id="6" data-destination="90" class="words">(Sq#6)</span></div>
<div data-id="7"><span data-id="7" data-destination="73" class="words">(Sq#7)</span></div>
<div data-id="8"><span data-id="8" data-destination="74" class="words">(Sq#8)</span></div>
<div data-id="9"><span data-id="9" data-destination="75" class="words">(Sq#9)</span></div>
<div data-id="10"><span data-id="10" data-destination="76" class="words">(Sq#10)</span></div>
<div data-id="11"><span data-id="11" data-destination="77" class="words">(Sq#11)</span></div>
<div data-id="12"><span data-id="12" data-destination="78" class="words">(Sq#12)</span></div>
<div data-id="13"><span data-id="13" data-destination="61" class="words">Square 13</span></div>
<div data-id="14"><span data-id="14" data-destination="62" class="words">Square#14</span></div>
<div data-id="15"><span data-id="15" data-destination="63" class="words">Square#15</span></div>
<div data-id="16"><span data-id="16" data-destination="64" class="words">Square#16</span></div>
<div data-id="17"><span data-id="17" data-destination="65" class="words">Square#17</span></div>
<div data-id="18"><span data-id="18" data-destination="66" class="words">Square#18</span></div>
<div data-id="19"><span data-id="19" data-destination="49" class="words">Square#19</span></div>
<div data-id="20"><span data-id="20" data-destination="50" class="words">Square#20</span></div>
<div data-id="21"><span data-id="21" data-destination="51" class="words">Square#21</span></div>
<div data-id="22"><span data-id="22" data-destination="52" class="words">Square#22</span></div>
<div data-id="23"><span data-id="23" data-destination="53" class="words">Square#23</span></div>
<div data-id="24"><span data-id="24" data-destination="54" class="words">Square#24</span></div>
<div data-id="25"><span data-id="25" data-destination="37" class="words">Square#25</span></div>
<div data-id="26"><span data-id="26" data-destination="38" class="words">Square#26</span></div>
<div data-id="27"><span data-id="27" data-destination="39" class="words">Square#27</span></div>
<div data-id="28"><span data-id="28" data-destination="40" class="words">Square#28</span></div>
<div data-id="29"><span data-id="29" data-destination="41" class="words">Square#29</span></div>
<div data-id="30"><span data-id="30" data-destination="42" class="words">Square#30</span></div>
<div data-id="31"><span data-id="31" data-destination="25" class="words">Square#31</span></div>
<div data-id="32"><span data-id="32" data-destination="26" class="words">Square#32</span></div>
<div data-id="33"><span data-id="33" data-destination="27" class="words">Square#33</span></div>
<div data-id="34"><span data-id="34" data-destination="28" class="words">Square#34</span></div>
<div data-id="35"><span data-id="35" data-destination="29" class="words">Square#35</span></div>
<div data-id="36"><span data-id="36" data-destination="30" class="words">Square#36</span></div>
<div data-id="37"><span data-id="37" data-destination="13" class="words">Square#37</span></div>
<div data-id="38"><span data-id="38" data-destination="14" class="words">Square#38</span></div>
<div data-id="39"><span data-id="39" data-destination="15" class="words">Square#39</span></div>
<div data-id="40"><span data-id="40" data-destination="16" class="words">Square#40</span></div>
<div data-id="41"><span data-id="41" data-destination="17" class="words">Square#41</span></div>
<div data-id="42"><span data-id="42" data-destination="18" class="words">Square#42</span></div>
<div data-id="43"><span data-id="43" data-destination="1" class="words">Square#43</span></div>
<div data-id="44"><span data-id="44" data-destination="2" class="words">Square#44</span></div>
<div data-id="45"><span data-id="45" data-destination="3" class="words">Square#45</span></div>
<div data-id="46"><span data-id="46" data-destination="4" class="words">Square#46</span></div>
<div data-id="47"><span data-id="47" data-destination="5" class="words">Square#47</span></div>
<div data-id="48"><span data-id="48" data-destination="6" class="words">Square#48</span></div>
<div data-id="49"><span data-id="49" data-destination="91" class="words">Square#49</span></div>
<div data-id="50"><span data-id="50" data-destination="92" class="words">Square#50</span></div>
<div data-id="51"><span data-id="51" data-destination="93" class="words">Square#51</span></div>
<div data-id="52"><span data-id="52" data-destination="94" class="words">Square#52</span></div>
<div data-id="53"><span data-id="53" data-destination="95" class="words">Square#53</span></div>
<div data-id="54"><span data-id="54" data-destination="96" class="words">Square#54</span></div>
<div data-id="55"><span data-id="55" data-destination="79" class="words">Square#55</span></div>
<div data-id="56"><span data-id="56" data-destination="80" class="words">Square#56</span></div>
<div data-id="57"><span data-id="57" data-destination="81" class="words">Square#57</span></div>
<div data-id="58"><span data-id="58" data-destination="82" class="words">Square#58</span></div>
<div data-id="59"><span data-id="59" data-destination="83" class="words">Square#59</span></div>
<div data-id="60"><span data-id="60" data-destination="84" class="words">Square#60</span></div>
<div data-id="61"><span data-id="61" data-destination="67" class="words">Square#61</span></div>
<div data-id="62"><span data-id="62" data-destination="68" class="words">Square#62</span></div>
<div data-id="63"><span data-id="63" data-destination="69" class="words">Square#63</span></div>
<div data-id="64"><span data-id="64" data-destination="70" class="words">Square#64</span></div>
<div data-id="65"><span data-id="65" data-destination="71" class="words">Square#65</span></div>
<div data-id="66"><span data-id="66" data-destination="72" class="words">Square#66</span></div>
<div data-id="67"><span data-id="67" data-destination="55" class="words">Square#67</span></div>
<div data-id="68"><span data-id="68" data-destination="56" class="words">Square#68</span></div>
<div data-id="69"><span data-id="69" data-destination="57" class="words">Square#69</span></div>
<div data-id="70"><span data-id="70" data-destination="58" class="words">Square#70</span></div>
<div data-id="71"><span data-id="71" data-destination="59" class="words">Square#71</span></div>
<div data-id="72"><span data-id="72" data-destination="60" class="words">Square#72</span></div>
<div data-id="73"><span data-id="73" data-destination="43" class="words">Square#73</span></div>
<div data-id="74"><span data-id="74" data-destination="44" class="words">Square#74</span></div>
<div data-id="75"><span data-id="75" data-destination="45" class="words">Square#75</span></div>
<div data-id="76"><span data-id="76" data-destination="46" class="words">Square#76</span></div>
<div data-id="77"><span data-id="77" data-destination="47" class="words">Square#77</span></div>
<div data-id="78"><span data-id="78" data-destination="48" class="words">Square#78</span></div>
<div data-id="79"><span data-id="79" data-destination="31" class="words">Square#79</span></div>
<div data-id="80"><span data-id="80" data-destination="32" class="words">Square#80</span></div>
<div data-id="81"><span data-id="81" data-destination="33" class="words">Square#81</span></div>
<div data-id="82"><span data-id="82" data-destination="34" class="words">Square#82</span></div>
<div data-id="83"><span data-id="83" data-destination="35" class="words">Square#83</span></div>
<div data-id="84"><span data-id="84" data-destination="36" class="words">Square#84</span></div>
<div data-id="85"><span data-id="85" data-destination="19" class="words">Square#85</span></div>
<div data-id="86"><span data-id="86" data-destination="20" class="words">Square#86</span></div>
<div data-id="87"><span data-id="87" data-destination="21" class="words">Square#87</span></div>
<div data-id="88"><span data-id="88" data-destination="22" class="words">Square#88</span></div>
<div data-id="89"><span data-id="89" data-destination="23" class="words">Square#89</span></div>
<div data-id="90"><span data-id="90" data-destination="24" class="words">Square#90</span></div>
<div data-id="91"><span data-id="91" data-destination="7" class="words">Square#91</span></div>
<div data-id="92"><span data-id="92" data-destination="8" class="words">Square#92</span></div>
<div data-id="93"><span data-id="93" data-destination="9" class="words">Square#93</span></div>
<div data-id="94"><span data-id="94" data-destination="10" class="words">Square#94</span></div>
<div data-id="95"><span data-id="95" data-destination="11" class="words">Square#95</span></div>
<div data-id="96"><span data-id="96" data-destination="12" class="words">Square#96</span></div>
</div><!-- end of phrase class -->
<button id="move-text" type="button">Move blue square content inside each square!</button>
<div class="wrap">
<div id="drop-em" style="margin-left: 30px;" class="grid">
<div class="item"><!-- 16th div -->
<div class="content"></div><!-- must have no spaces inside .content -->
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item"><!-- 20th block -->
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item"><!-- another 20th div set -->
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item"><!-- Another 20th div -->
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item"><!-- 20th div from bottom -->
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
</div>
>Solution :
Use the flex-wrap: wrap property for the breaking div on the next line based on the screen size.
#phrase {
color: #fff;
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
margin: 2rem 0;
}