I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the bottom row start overlapping the ones in the row above. Adjusting the margin doesn't seem to work for each individual box on the smaller screen. I even tried adding 'overflow:auto' but it didn't solve the issue. Any suggestions on how I can ensure that each letter box has the desired margin without overlapping, even if they span across two rows upon screen resize?
I found a similar question asked here, but I'm not quite sure how to apply the answer to my situation.
https://i.stack.imgur.com/Zx35O.png https://i.stack.imgur.com/A4tKe.png
Here is the relevant code snippet:
<div class="booyah-box col-xs-10 col-xs-offset-1">
<h2 class="text-center">
<% scrambled_word_array.each do |character| %>
<div class="boxed-letter"><%= character %></div>
<% end %>
</h2>
</div>
The CSS styles being used:
.booyah-box {
-moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
-webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
box-shadow: 1px 1px 2px 0 #d0d0d0;
background: #fff;
border: 1px solid #ccc;
border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
padding: 10px;
font-family: "Lucida Grande", sans-serif;
}
.booyah-box .boxed-letter {
display: inline;
padding: 8px;
margin: 2px;
border: 1px solid black;
border-radius: 5px;
background: grey;
font-family: "Courier New", Courier, monospace;
color: white;
}