[Vuejs]-Trying to print out my blog posts horizontally on the page

by

0👍

✅

You can try to update CSS like to create a responsive layout. Please update color scheme based on your requirement. Just sharing the basic layout you can use and update as needed:

.post-block {
  color: #151515;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.post-block>div {
  flex: 1 0 calc(26% - 10px);
  margin: 5px;
  padding: .5rem;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;
  color: #84613D;
  font-family: "Lucida Console", Monaco, monospace;
  background: #FDF9EA;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}
.post-block .posts {
  text-align: center;
  align-items: center;
  margin:0 auto;
}

@media (max-width: 768px) {
  .post-block>div {
    flex-basis: calc(34% - 10px);
  }
}

@media (max-width: 320px) {
  .post-block>div {
    flex-basis: calc(51% - 10px);
  }
}

p,
h2 {
  color: #D3D3D3;
}

Working Demo ( Please resize the result window to see the responsive layout )

Leave a comment