Basically, I have a hero section with two centered divs. One with text on the left and the other with an image on the right. As the browser width decreases, I’d like the image to stay full size with the text block becoming more narrow until it hits a minimum width of 300px, at which point I’d like the image to wrap.
My image is in the background as opposed to having a pic element if that matters.
Great question @alfredo! I know how tricky it can be learning Flexbox at first, glad to see that you are starting to use it in your designs!
So it actually looks like you have already configured this wrapping behavior to occur correctly for your cell phone image. Since your tablet image is part of the background image that won’t actually wrap. You would need to instead add the tablet part of the image as another image with your mobile phone image.
As well as you may want to consider removing the max-height style from your hero school class as that will cause some odd behavior with wrapping.
So I removed the max-height style (thanks for that tip!). However, if you resize your browser you’ll see that the pic image is wrapping. Its just wrapping too soon and the text block isn’t ever becoming more narrow. Instead, the pic wraps as soon as the text+image are full width.
I have a min width set on the text block (and a max width also) but it just doesn’t seem to be working.
My ultimate plan is to have the phone wrap when the text hits a min width of 300px and on wrap to shrink the size of the phone and switch out the background to another image that have a smaller tablet that is lower on the page. Basically, just like the stripe/payments example I sent.
Would you have any thoughts on how to achieve this result? Muchas gracias in advance.
@Waldo. I forgot to mention something and at the risk of leaning too heavily on your know-how, I think your observation about the tablet being in the background is an important one. I would prefer to have it as a div (not background) but I didn’t know how to position it this way relative to the phone. In other words, could you tell me how to have the tablet behind the phone and kind of hanging off the page when the browser is resized down, all while keeping the text and phone roughly centered on the page?
