The challenge I'm facing involves designing CSS for a web application centered around photo uploads displayed as polaroids. Each photo is encased in white padding, with extra padding at the bottom and the design adapts responsively.
If a user adds a caption to their photo, it should appear within the polaroid at the bottom, adjusting the whitespace accordingly to accommodate text length - all managed through CSS.
However: When photos are scaled down, particularly in thumbnail sizes, the polaroid effect breaks down causing text overflow issues. I need assistance in preserving the style integrity for smaller image dimensions. It would be great to have an example illustrating this, preferably using well-supported CSS 2.1 attributes since a significant number of my users rely on browsers like Opera Mini with limited CSS3 or JS support.
Two examples of correct layout:
1) Thumbnail:
https://i.sstatic.net/aOc0i.png
2) Full-size image:
https://i.sstatic.net/hSFof.png
Two examples of incorrect layout:
1) Thumbnail of the full-sized image above:
https://i.sstatic.net/ANnTl.png
2) Another thumbnail:
https://i.sstatic.net/rQYyR.png
Note that these thumbnails display correctly without a caption, such as:
https://i.sstatic.net/je77Y.png
Here's an excerpt from the CSS styling:
.mbs {
margin-bottom: 0.5em;
}
.bw {
word-wrap: break-word;
}
.polaroid {
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 10px;
border-radius: 6px;
}
.sh-l {
-webkit-box-shadow: -2px 2px 2px #90C0B0;
-moz-box-shadow: -2px 2px 2px #90C0B0;
box-shadow: -2px 2px 2px #90C0B0;
}
.inner-img {
display: block;
margin: 0 auto;
margin-bottom: 20px;
width: 100%;
height: auto;
border-radius: 12px;
}
.img-caption {
display: table-caption;
caption-side: bottom;
width: 100%;
}
.cgy {
color: grey;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin-bottom: 0.5em;
}
Below is a section of the HTML code:
<div class="mbs polaroid sh-l" style="padding:5px">
<div style="display: inline-table;">
<img src="{{ img_url }}" height="38" class="mbs inner-img" style="border-radius:4px;margin-bottom: 8px;" alt="photo">
{% if img_caption %}<div class="cgy bw img-caption"><bdi>{{ img_caption }}</bdi></div>{% endif %}
</div>
</div>
Please disregard {{ and {%, as they are part of the Django template syntax. While this code has been effective so far, I am open to making adjustments if necessary.