Thumbnail Grid Set Up

• 

  eliteeventhire · Member · Feb 27, 2017 at 1:31 pm

  • Copy link
  • Add topic to favorites

  I have put 6 thumbnail pictures on my homepage which I am going to use to link to other pages on my site.
  There are 6 images in total which are each showing up on a new line.
  I would like help trying to get them into 2 rows of 3 pictures.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 28, 2017 at 2:44 am

  • Copy link

  Hi, first off, open that page in your editor, switch to the Text tab and make the opening div for each of the images remove the alignment declaration you have, add the CSS class declaration so they look like this.
  <div class="grid-pic">
  Next, the
  <article></article>
  stuff really isn’t needed here, so I would suggest removing all of it. Also, between the first image and the second, you have an empty paragraph. Remove that as well.

  Next add the following to your custom CSS. At 600px, I’ve taken things to two columns and then at 450px, down to a single column as the images get too small otherwise.

  .home .entry-content {
  	display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
  	justify-content: space-between;
  }
  .home .grid-pic {
  	width: 33% !important;
  }
  .home .grid-pic img {
  	max-width: none;
  	width: 100% !important;
  	height: auto !important;
  }
  .home .entry-footer {
  	width: 100%;
  }
  @media screen and (max-width: 600px) {
  	.home .grid-pic {
  		width: 48% !important;
  	}
  }
  @media screen and (max-width: 450px) {
  	.home .grid-pic {
  		width: 100% !important;
  	}
  }

  You will see that there is a difference in size between your images. I would suggest redoing all of those and making them a consistent size so there isn’t any misalignment issues.