How to fix alignment and spacing issues on blog main page cards?

Hi guys,

I have a problem with blog main page cards:

1- Article cards are not aligned.

2- No proper vertical gap between them.

3- Cards are not aligned in the middle of the page.

Thank you,

Consider mobile view as well

allianceautoproducts.com

Hey @Alliance

I would add the following code in your CSS file.

  1. Go to Online Store → Theme → Edit code.
  2. Search for your CSS file
.grid--blog {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid--blog .grid__item {
  margin-bottom: 20px;
}

How to align the article cads?

Hi @Alliance

Updated code below to bottom of file Assets/eboost.css

.grid--blog {
  padding: 30px;
  margin: -30px -30px -30px -60px;
  display: flex;
  flex-flow: wrap;
}
.grid--blog .grid__item {
  box-shadow: 0 0 0;
  margin-bottom: 55px;
}
.grid--blog .grid__item .grid--blog__inner {
  box-shadow: 10px 10px 25px grey;
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 0 22px 22px;
}
.grid--blog .grid__item .grid--blog__inner .article__grid-image-wrapper {
  margin-left: -22px;
  margin-right: -22px;
  width: auto;
  min-width: 100%;
}
.grid--blog .grid__item .grid--blog__inner .article__grid-meta {
  margin-bottom: 0;
}
@media only screen and (max-width: 749px){
  .grid--blog {
    margin: -30px -30px -30px -52px;
  }
  .article__grid-image-container {
    margin: 0;
  }
  .grid--blog .grid__item .grid--blog__inner {
    padding: 0 22px 22px 0;
  }
  .grid--blog .grid__item .grid--blog__inner .article__grid-image-wrapper {
    margin-left: 0;
    margin-right: -22px;
  }
}

Bottons are not aligned

Hi @Alliance

I saw it worked.

I meant, titles, button, and Excerpt in the card are not aligned. Botton background color #d0021b, no border.

Hi @Alliance

updated

Thank you very much for the great work and support. If I can rate you here, should give you 10/10.

Hi bro,

I have an issue with video size in the product description tab , all views!

Thank you

allianceautoproducts.com