Photo layout

• 

  ezhvac · Member · Oct 5, 2016 at 6:06 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I would like to have my photos in a grid-layout but also with a caption. If the grid-layout is not possible, I would like to atleast have them next to each other. I am using the venture template. It is only allowing one photo per line.

  Thanks!

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

• 

  samjhamdy · Member · Oct 6, 2016 at 2:31 am

  • Copy link

  Hi there,

  I’ve had a look at your Manufacturers page, and I think the following steps will work for what you want to do.

  1. Add the following new rules in your CSS panel:

  .grid {
  float: left;
  margin: 0 5em 0 7em;
  }

  .clear {
  clear: both;
  }

  2. Based on the varying width of the logos, it looks like 2 per line will work best. So you can start by adding the following HTML in the HTML view of the page editor:

  <div class=”grid”> (before the first image code)
  </div> (after the first image code)

  Then repeat this for the second image.

  After the first two images, insert a new line with this HTML:

  <div class=”clear”></div>

  This will clear the floats for the next set of images.

  Repeat these steps for every two images on the page, and you should have a nice grid-style layout with 2 images per line.

  Let us know if this works for you, or if you have any other questions.

  Cheers,
  Sam