Tribute Page: Help With Flexbox / mystery space below photos

Hi everyone. I am working on my tribute page in codepen :

https://codepen.io/jesswein/pen/XWawMqW

and would appreciate some help.

I have built flex containers for each section of the site, each containing an image and text as separate children in flex-direction: row. These convert to column using media queries for smaller windows.

There is ugly mystery space below the images that I need to learn how to deal with more effectively.

I made this “problem space” bright blue so it can be easily seen. Based on color, it’s coming from #main. My problems all deal with managing this space.

  1. There is a text line-height (1.5 in this case) amount of space below each image even when the window is stretched such that they should fill the container to the bottom. How can I remove this space without messing up the text line height? (Update: I managed to change the color under the image by adding the same background color of the text child, This made the space under it the same color, but there is still a chunk of #main under each picture until the end of the text item. I would still like to eliminate this small 1.5 line gap under the images)

  2. When the window is narrower, the area under the images aligned to the text becomes the color of #main, as though it’s not in the box. How can I, at the very least, make this space display in the color of each div? Any other suggestions for making the layout more attractive when minimized ( making text and image adjust to the same height somehow or allowing text in the row to overflow under the image or changing the flex grow or shrink relationship… also appreciated. I keep trying to apply flex properties to the containers and children in css, but nothing seems to happen when I do!

  3. When the images shift into column view for medium screens, there is this “#main” space around them. Is there a way to make the image grow to fill the space without distortion? (I definitely tried flex-grow to no avail. Possibly a problem in my css.

Please know that this is the first website I have ever built, so please be kind. I barely know what I’m doing!

I’m sure it’s pretty clunky code-wise. I appreciate any and all feedback.

Thanks,

Jess

Your page looks good @jesswein. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    Mentioning because you have elements out of order. Everything the browser renders should be in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • here” and “quotes” are not accessible

Because of the other issues I didn’t look too deep into your layout but rather than using floats in the flex containers just use flex properties. You seem to have a grasp on flexbox. I always wind up having to use A Complete Guide to Flexbox to help me at some point when I’m doing a layout.

1 Like

Thank you Roma! I will review the corrections and references you mentioned.

Your comments on body in codepen finally helped me understand that error.

I had started running things through the validator, and, yes, I have many errors.

As for the layout issue, Flexbox definitely takes some getting used to. I don’t really have my head around it so much as I’m barely clinging to the outside edge of understanding. I know there must be a solution to making the blank space look better, and it’s probably simple.

Thanks again for your help.

1 Like