If you can help i just want to have some guidance with regards to the following problem.
Basically if I have too much text in the description of the image, it pushes the image up. What would be the most attractive way of dealing with such an issue?
Thanks.
I created a basic fiddle - re-size the window to get them inline
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 30%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
display: inline-block;
width: 15.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
For future peoples, I decided that a flex solution would really help me here.
I created the following css code:
.file-wrapper {
flex-direction: row;
flex-flow: row wrap;
justify-content: center;
display: flex;
}
.file-image {
padding: 30px;
}
.file-box {
text-align: center;
padding: 1em;
flex-basis: 10em;
margin: 1em;
}
.fileTextWrapper {
display: table;
width: 100%;
height: 3em;
}
.file-text {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
The HTML is very self explanatory. The wrapper contains all the elements, and then I have divs for the mages and their descriptions. By doing this not only are they responsive but they are aligned in the centre and the text is wrapped nicely.