0

I am having an issue with positioning a caption on top of a picture. The pictures are in a column, there are 4 columns. The first 3 columns seem to work fine but then when it comes to the last column, it does not look right at all and I feel like it may have to do with wordpress css? I have tried to add css to the last column which positions it correctly but then the width is not right... I am so confused. This may be such a simple fix but I can't seem to figure it out

Here is the link to the website http://aminkhalil.com

Here is my html code

[fourcol_one]

<a href="#" class="caption">
<img class="hover" alt="Services" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Services</span></a>

[/fourcol_one]

[fourcol_one]

<a href="#" class="caption">
<img class="hover" alt="Keep Healthy" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Keep Healthy</span></a>

[/fourcol_one]

[fourcol_one]

<a href="#" class="caption">
<img class="hover" alt="Meet The Staff" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Meet The Staff</span></a>

[/fourcol_one]

[fourcol_one_last]

<a href="#" class="caption">
<img class="hover" alt="Portal" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Portal</span></a>
[/fourcol_one_last]

Here is my css

a.caption{
  position:relative;
}
a:hover img.hover{
  opacity: 0.5;
  filter: alpha(opacity=530);
}
span.caption{
  color: #fff !important;
  position: absolute;
  bottom: 0;
  left: 2%;
  padding: 1.9%;
  width: 93%;
  background-color: rgba(0,0,0,0.5);
}
.last span.caption{
  bottom: 22px;
  left: 3px;
}

Any help is appreciated. Thank you in advance!!

stephuhnee8708
  • 40
  • 1
  • 6

1 Answers1

0

I figured it out!! I had some extra spaces/breaks in the HTML which was making the first 3 columns different than the last. I added/changed a couple of things to span.caption and deleted the CSS for .last span.caption

span.caption{
    color: #fff !important;
    position: absolute;
    padding: 1.9%;
    width: 93.5%;
    background-color: rgba(0,0,0,0.5);
    display: block; /* added */
    bottom: 0; /* changed */
    left: 3px; /* changed */
}

Thanks to anyone who may have done any research!!

stephuhnee8708
  • 40
  • 1
  • 6