Hi everyone. I am working on my tribute page in codepen :
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.
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)
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!
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.