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?
portfolio pen
Try changing the units of the font-size in the Polaroid class. Try making it 1em instead of 10px.
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;
}
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
You’re a genius @csorrentino! 
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. 
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