How to adjust heights of this flex box?

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!

I’m not really sure what you are asking, I think it’s about scaling the top picture. I see you have a fixed height on the div that contains the picture, that’s not good, remove that. Try giving that div a % width instead.

That’s a terrible hack. Don’t use <br> for vertical spacing, use padding or margins to create space between elements.

I’m a little confused here ?

The image is 250px tall but you have put it ina div that is 120px high and therefore the image overflows.

.modBoxImage {
    height: 120px;
}

If you remove the height from the above then you won’t need any breaks in the html. You only need them because the image is overflowing (and not in the flow) and the h3 starts below the 120px block and not under the actual image.

You have already utilised flexbox to push the h3 down anyway as the margin-top:auto on a flex item will push the element to the bottom automatically.

I totally missed that height. I’m sorry for the bogus post :scream:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.