0

While writing HTML, the div elements on my page started being positioned with random margin amounts after reloading the page.

As you can see, the second div is clearly below the 1st and 2nd divs while the 3rd div is for some reason above the 1st div. All of these elements have the same margin.

enter image description here

border-style: solid;
border-width: 1vh;
width: 30vw;
height: 30vh;
margin: 2vh;
padding: 1vh;
border-radius: 2vh;
display: inline-block;
background: #e3e3e3;
border-color: #3eabfe;
font-family: "Quicksand",
sans-serif;
text-align: center;
box-sizing: border-box;
<div class="post">
  <div class="post-title"> {{ post['display'] }} <a class="link" href="https://twitter.com/{{ post['username'] }}" target="_blank"> @{{ post['username'] }} </a> </div>
  <div class="post-description"> {{ post['text'] }} </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
walker
  • 444
  • 2
  • 12

1 Answers1

0

Put your cards in a container div to set them like cards and then Try this to style the cards:

.container{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(17em, 1fr))
}
.post{
  border-style: solid;
  border-width: .3em;
  margin: .5em;
 padding: .5em;
 border-radius: 1em;
 display: flex;
 flex-flow: column wrap;
 gap: 1em;

 background: #e3e3e3;
 border-color: #3eabfe;

 font-family: "Quicksand", sans-serif;
 text-align: center;
 box-sizing: border-box;
}
Glen tea.
  • 109
  • 7
  • Can you explain what you changed? – walker Oct 17 '22 at 18:16
  • Step 1: I created a div with class name "container" Step 2: I placed all the .post divs inside the .container div step 3: I created a Grid layout on the .container div for all the .post divs to display them like cards Step 4: I made all the I organised all the content inside the .post div The .container div uses grid to make the posts all equal size and puts them on equal positions. Hope this helps. – Glen tea. Oct 17 '22 at 18:26
  • Can you explain what you changed _in your answer_? Again, see [answer]. – isherwood Oct 17 '22 at 18:26
  • I added code snippet for the .container class and changed all the units from vw/vh to em. I also changed the display property for the .post class to flex and set it to column wrap. – Glen tea. Oct 17 '22 at 18:41