gonzalo2000 gonzalo2000 - 3 months ago 15
CSS Question

divs overlap in smaller screen size

I'm working on an feature where each letter should be in its own box, which I'm trying to style. Boxes should be one next to the other or in multiple rows, with a margin between them in either case. It works fine, until I change the screen size to a small (or test it on mobile), and then the letters from the bottom row overlap those of the above row. Changing the

margin
is not applying an all-around margin to each box in the smaller screen. I tried adding
overflow:auto
but didn't see a difference. How can I have each letter box separated with the desired margin without overlapping (even if elements need to be spaced in two rows upon screen resize)?

I see that something similar has been asked before, but I'm unsure as how to transfer the answer.

intended effect
bug

In the view:

<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 pertinent CSS:

.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;
}

Answer

This helps you

Instead of display: inline use display: inline-block

worked nice for me. enter image description here

Comments