Grid not working anymore

  • Resolved gezginrocker

    (@gezginrocker)


    5 years, 2 months ago

    I’m a long time user. I was using Grid system with extra functions code and css code. Recently I updated the plugin to latest version but grid is not working anymore. I have updated the shortcode and css according to the latest info and removed the functions code still not working. Only a single column is displayed.

    EDIT: Solved by adding “grid-template-columns: 1fr 1fr 1fr;” to .display-posts-listing.grid.

    • This topic was modified 5 years, 2 months ago by gezginrocker.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter gezginrocker

    (@gezginrocker)

    Images and titles were also not aligned properly, this is my final css that solves the problem in case anyone else also has problem.

    .display-posts-listing.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}
.display-posts-listing.grid .title {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.display-posts-listing.grid img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
}

    Similar problem, but I can’t get your CSS to work. What structure does navigator show for the parent elements of your short code?

    The CSS works ok – the problem was that I didn’t set the featured image. Duh.

    There are however annoyingly large gaps between adjacent columns of the grid that I can’t seem to shrink even with your suggested CSS. This may be a problem with the formatting of the posts themselves though.

    Thread Starter gezginrocker

    (@gezginrocker)

    Hi this is my final code. You can change grid-row-gap and grid-column-gap values for space between rows and columns.

    .display-posts-listing.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 25px;
  grid-column-gap: 15px;
  margin-bottom: 5px;
  margin-top: 10px;
}
.display-posts-listing.grid img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
}
.display-posts-listing.grid .title {
  display: block;
  text-align: center;
  font-size: 22px;
}

    Thanks – greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Grid not working anymore’ is closed to new replies.