[SOLVED] Polaroid Image/Card won't keep <p> content in container

#1

Trying to use the polaroid image / card to showcase some of my work on portfolio page, but the descriptions I put at the bottom of the image are not contained in the picture (or perfectly centered for that matter) when I scale the screen to different sizes.

Any thoughts on what I’m doing wrong?

:point_right:portfolio pen:point_left:

Screen Shot 2017-03-18 at 1.50.14 PM.png1858×610 635 KB

#2

Try changing the units of the font-size in the Polaroid class. Try making it 1em instead of 10px.

#3

That didn’t work but it did show my that my code changing the font size in the polaroid p class was wrong (i.e. I had just font instead of font-size as the selector).

After playing around with the width, bottom, and font-size I was able to get the text to stay in the description portion of the polaroid how I want for the most part, but I know it’s not working properly because when I adjust the screen size of the W3S example the text size and proportion is flexible and adjusts appropriately.

Here’s what I’ve got for a hack-fix for now:

.polaroid p {
  position: absolute;
  text-align: center;
  width: 94%;
  bottom: 5px;
  font-size: .8em;
  color: #888;
}
#4

One thing I notice in your pen is that you are using border-bottom to create the polaroid description area. I think the problem is related to an attempt to get the border to act like a container for the text.

Another way to approach this would be to move that border-bottom height and background color over to the container div. That should give you the same look with a little more control over the text.

.container {
  padding: 8px;
  background-color: #fff;
  height:50px;
}

.polaroid p {
  text-align:center;
  font-size: .66em;
  line-height: normal;
  color: #888;
}

*You may want to change class name from “container” to something else like “polaroid-description”. I believe Bootstrap uses “container” as a page wrapping class but I am not certain.

1 Like
#5

You’re a genius @csorrentino! :wink:

I was basing my original code on W3S’s example, but your thought to use a container to control the text instead of the border-bottom was spot-on. :dart:

Here’s the code I ended up with and it works great. Thanks for all your help!

[SOLVED]

.polaroid {
  position: relative;
  margin: auto;
  display: block;
  width: 80%;
  border: 5px solid #fff;
}

.polaroid-container {
  padding: 15px 0px 10px 0px;
  text-align: center;
  background-color: #fff;
  height: 50px;
}

.polaroid p {
  font-size: .66em;
  line-height: normal;
  color: #888;
}
1 Like
#6