CSS for 2 columns using images

en WordPress.com Forums CSS for 2 columns using images

• 

  randygener · Member · Dec 10, 2016 at 3:08 pm

  • Copy link
  • Add topic to favorites

  May someone help fix the CSS I used on the homepage? Basically, there are two images, and there is way too big a space between them. What CSS layout codes is necessary to move them together?

  For the moment, I’ve managed to use this CSS

  <div style=”margin:1px;width:40%;padding:10px;float:left;”>

  <img class=”size-medium wp-image-158831 alignnone” src=”https://randygener.files.wordpress.com/2016/12/final-power-of-mentoring-e1481378407315.png” alt=”img_2015″ width=”500″ height=”748″ />

  </div>

  <div style=”margin:auto;width:40%;padding:5px;float:right;”>

  <img class=”size-medium wp-image-158831 alignnone” src=”https://randygener.files.wordpress.com/2016/09/final-tbi-hope-recovery-logo.png” alt=”img_2015″ width=”500″ height=”723″ />

  </div>

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

• 

  jeremeylduvall · Member · Dec 10, 2016 at 3:41 pm

  • Copy link

  One potential solution here would be to use a margin for each side. For example, you could set margin-right: 50px; for the images floated right and use margin-left: 50px; for the images floated left. That would get them closer together. Unfortunately, this doesn’t look so great on mobile devices.

  http://cld.wthms.co/OB6j/16stXwu6

  Instead, I would recommend using HTML classes within the post and then CSS to change this and target only large screen sizes. Here’s an example to start with:

  Inline HTML in post:

  <div class="centeredphotos">
  <div class="leftcolumn">
  <img class="size-medium wp-image-158831 alignnone" src="https://randygener.files.wordpress.com/2016/12/final-power-of-mentoring-e1481378407315.png" alt="img_2015" width="500" height="748" />
  </div>
  
  <div class="rightcolumn">
  <img class="size-medium wp-image-158831 alignnone" src="https://randygener.files.wordpress.com/2016/09/final-tbi-hope-recovery-logo.png" alt="img_2015" width="500" height="723" />
  </div>
  </div>

  CSS:

  .centeredphotos {
  	text-align: center;
  }
  
  @media screen and (min-width: 1200px) {
  	.leftcolumn {
  		float: left;
  		max-width: 45%;
  		margin-left: 30px;
  	}
  
  	.rightcolumn {
  		float: right;
  		max-width: 45%;
  		margin-right: 30px;
  	}
  }

  I’m sure one of the experts here will have a better suggestion, but hopefully that will get you started!

• The topic ‘CSS for 2 columns using images’ is closed to new replies.