Hi there folks!
You guys have helped me in the past with this layout by sharing the flexy wrap around my results. The issue that I’m having is that I’m finding myself unable to figure out how to adjust the top div, where the image sits. If you look at the page in question, you can see that I’ve added many breaks to push the h3 down.
The page: https://wheeltastic.com/shop/pro-comp
The code:
CSS:
[code].modBox {
margin:0 auto;
padding:0;
max-width:1680px;
padding:10px;
list-style:none;
display:flex;
flex-wrap:wrap;
}
p {
margin:0 0 1em
}
.modBoxImage {
height:120px;
margin:10px 0;
text-align:center;
}
.modBox li {
display: inline-block;
border: 2px solid #6F0212;
border-radius: 25px;
vertical-align:top;/* fallback*/
display:inline-block;/* fallback*/
margin:10px 1%;
min-width:200px;/* doesn’t work in ios so use media queries to go to one column /
max-width:350px;
flex-direction:column;
flex:1 0 29%;
display:flex;
}
/.modBox li:hover {background: #fd6;} /
.modBox a {
text-decoration: none;
padding:10px;
width:100%;
display:flex;
flex-direction:column;
flex:1 0 auto;/ important for chrome /
}
.modBoxFooter {
text-align:center;
margin-top:auto;/ this is important to move footer down*/
padding:10px;
}[/code]
HTML:
[code]
<li>
<a class="inner" href="/pro-comp/5034-series-rockwell">
<div class="modBoxImage img">
<img width="250" src="/images/models/5034-series-rockwell.jpg" alt="5034 Series Rockwell">
</div>
<div class="modBoxFooter">
<br>
<br>
<br>
<br>
<br>
<br>
<h3><b>5034 Series Rockwell</b></h3>
</div>
</a>
</li>[/code]
Can I ask how I should handle it so that the top div will adjust to whatever is inside it or is that not possible with this particular design?
Thanks for your time!