Sorry if this is a trivial question, I am 'new' to programming in general but here goes:
So I am making a Portfolio page as an exercise, but I can't solve the following problem.
I got 6 figures, all contain an img (which are links) and a figcaption. I am trying to place these in 2 columns - in these 2 columns the images should be centered with their figcaption.
I have tried several methods: trying to make images inline-blocks, trying to make 2 divs for the 2 columns, trying to use the Bootstrap grid system but I always end up with the following problem.
When on full page view, the smaller images (in width) have some "autopadding" added to them, so the area around them also becomes a link + the figcaption is not displayed under them. I am guessing this is they are displayed as an inline block. No matter how I try, this happens every time.
I known there must be an easy solution for this, but I just can't seem to find it. Any advice please?
To better understand the issue, here is a link to the site I am talking about:
http://codepen.io/Bubicica/pen/RRaaze (note it looks OK here, this is how I want it to look)
http://codepen.io/Bubicica/full/RRaaze/ (here 'Project fuzzy' looks pretty bad and shows the problem)
Here is the the (one of the) CSS(s) and (one of the) HTML(s) that I am using:
<a href="https://www.youtube.com/watch?v=N42X5dljQGk" target="_blank"><img src="http://placekitten.com/300/300" class="img-responsive kitten" id="img1"></a>
<a href="https://www.youtube.com/watch?v=tYXlFYBW56g&feature=youtu.be" target="_blank"><img src="http://placekitten.com/310/330" class="img-responsive kitten" id="img2"></a>
It seems that the easiest solution to your problem would be to use Flexbox (
display: flex) on the items as it allows for very high customization of the alignment of things. The best resource for this for me has has been CSS-Tricks' guide, here. After reading that, I'm confident you'll have enough of an understanding of it to be able to apply it to your problem here.