Single introductory responsive page using CSS Flexbox

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 4 years ago

  I've not done this challenge so maybe it's off-spec in terms of the design, but it looks good and responsive to me.

  As specifically as possible, what are you unhappy with?

  0

  ---

  

  Yemisrach•1,430

  @Yemisrach15Posted about 4 years ago

  @markup-mitchell I think the image is big for the tablet size and I've used flex: 130% to make the image take up half of the viewport width. I don't know if that is the correct way to do it but it worked. Is there any alternative? (It's my first time using flexbox)

  0

  

  Mark Mitchell•1,820

  @markup-mitchellPosted about 4 years ago

  @Yemisrach15 Hmmm. It took me a while to figure out what your flex: 130% was even doing, but it seems like you're using it to make the image bigger in the desktop layout (over 1100px wide)?

  It's a bit of a weird one, because you're setting the width of the img to 100% and then using its properties as a flex-item to grow it beyond that limit.

  I'd definitely say that setting something -- especially an image property -- to over 100% is a smell. If it was a jpg you'd likely see the resolution suffer, but it's not obvious here because the source is SVG.

  Flexbox is a whole mindset, so it's hard to say what's 'correct'. I find it useful to think about what's controlling/setting constraints on the properties of flex items.

  In this case I'd suggest taking the flex property off .illustration and instead giving .desc a width (say, 50%) at the desktop breakpoint.

  It makes sense to me that you'd want to be explicit about the properties of your copy, and leave the image to scale in accordance with that.

  TBH, I wouldn't worry too much about it at this stage; if you build out lots of designs you'll start to figure out some principles for yourself.

  Just watch out for the feeling that you don't understand how a flex-layout is working, or that it seems over-complicated. In that case it's worth taking the time to rethink it from first principles.

  1

  

  Yemisrach•1,430

  @Yemisrach15Posted about 4 years ago

  @markup-mitchell Thank you for your helpful comment. I'll hopefully get all the bits of flexbox layout in time.

  0