Negative space inconsistent

• 

  liamrj · Member · Aug 30, 2016 at 2:13 pm

  • Copy link
  • Add topic to favorites

  on the home page of my website I have three images that are spaced consistently with each other,

  However the spacing to the left of the first image and to the right of the last image is not consistent.

  Please help.

  Screen shot explaining is in my media library.

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

• 

  dcoleonline · Staff · Aug 30, 2016 at 3:18 pm

  • Copy link

  Hi there,

  Since the images on the home page are left aligned, the last image is moving further left than it would if it were not left aligned. This is causing there to be more space to the right of that image.

  To fix this, replace your homepage content with this by using the HTML Editor, which will remove the left alignment of those images:

  <a href="http://indfrnt.com/how-to-get-involved/"><img class="wp-image-178" src="https://indfrntdotcom.files.wordpress.com/2015/12/get-involved.jpg" alt="get-involved" width="300" height="300" /></a><a href="http://indfrnt.com/products/"><img class="wp-image-256" src="https://indfrntdotcom.files.wordpress.com/2015/12/youtube-photo1.jpg" alt="youtube-photo" width="300" height="300" /></a><img class="wp-image-170" src="https://indfrntdotcom.files.wordpress.com/2015/12/untitled-2.jpg" alt="Untitled-2" width="300" height="300" />

  Next, remove this CSS, because it will cause the images to stack on top of each other instead of stay next to each other:

  .site-intro p a {
  	display: block;
  	width: 100%;
  	margin-right: 0;
  }

  Finally, add this CSS which will allow there to be spacing to the right of the first two image links, but not to the right of the last one (assuming you will link the last image):

  /*Add right margin to first two homepage images*/
  
  .site-intro a:first-of-type,
  .site-intro a:nth-of-type(2) {
      margin-right: 60px;
  }

  If you have any questions, just let us know.