CODEWITHSUNDEEP
htmlcssruby-on-railsmargin
gonzalo2000
gonzalo2000

Reputation: 648

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

Upvotes: 0

Views: 2914

Answers (2)

Pradeep Sapkota
Pradeep Sapkota

Reputation: 2082

This helps you

Instead of display: inline use display: inline-block

worked nice for me. enter image description here

Upvotes: 4

David
David

Reputation: 54

Try display: inline-block; on the .boxed-letter, that should give them their own space and keep them from overlapping

Upvotes: 1

Related Questions