I am just making it passed CSS Flexbox in the curriculum and I decided to make a little flexbox based tablelike display showing dog breeds and info on them. Can someone help me so that I can make it that when I resize the browser smaller it doesn’t shrink past the limit (width) where it would distort the text and images? I want the boxes to remain at a certain PX in width and not shrink past…
See if it is what you want:
Html
Breed: Labrador
Info: Friendly and outgoing
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-item {
flex: 1 1 300px; /* The third value is the basis width /
min-width: 300px; / Ensure items don’t shrink below 300px /
max-width: 400px; / Optional: set a max width */
margin: 10px;
box-sizing: border-box;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.flex-item img {
max-width: 100%;
height: auto;
}
Thanks for your help, the flex: 1 1 300px helped me
also setting max and min width of images to 300px
I got what I wanted… check link again.
the final outcome is the browser hides the content when resizing to smaller window. I only want the browsers with 1200px or more to see content to start.
What you recommend to do to make my site more responsive now that I have it set to an absolute width and height of “box” and “container” elements? obviously taking images in mind.
Consider using CSS media queries.