Somehow I cannot stretch flex-boxes; box1" and “box2” do not end on the same line. (box 2, the reservoir image) is “sticking out.”
When I open the page in the mobile environment (max-width: 480px), the image on the bottom and its caption (box2) are not displayed in the center.
Could anyone show me what I’ve been doing wrong?
I also welcome other feedback. Thank you.
Here is the link to my tribute page. https://codepen.io/chiewww/pen/abBWLJV
When I’m in full page view and a large browser window, box1 and box2 are the same size ( according to dev tools ), but the content in box1 isn’t long enough to give you a full box equal to the photos. You can experiment with the displayed size of the photos, but your text needs to appear to have a similar “aspect ratio” to that of the photos ( if I understand the effect you wish to achieve ). One problem is that text reflows and photos scale differently.
Also you should have only one instance of a media query of a given size with all the applicable styles in it. Not the multiple media queries of the same size that you currently have.
You’re forgetting display: flex; before using flex properties. and <figure> has left and right margins of 40px according to developer tools. Play with the margins in mobile. BTW did you use a css reset?
@tlc35us, thank you so much for taking the time to review my code!
Oops, thank you for catching that I have missed “display:flex;” in some areas.
I didn’t know I should declare everything for each size in one media query entry - fixed that.
What is css reset?
Does that mean checking html and CSS on Dev tool??
I used the Chrome Dev tool’s device mode to simulate different viewport sizes. But never used for anything else.
I saw your screenshot and started learning to use Chrome Dev tool to inspect my layout.
edited: Moved my post from HTML-CSS to Project Feedback.
I made the screenshot so you could see the result of the photo aligned and be able to see the margins in the lower right corner and see the element selected in the main window of dev tools.
CSS Reset makes all browsers the same by reseting most settings to zero. After which you can’t rely on the browsers margins but because you reset all browsers to zero then put in the margin you want back in it’s the same in all browsers. Normalize.css is a newer version that instead of reseting it raises all the settings to the ssme across all browsers. They’re for consistency across browsers.
If you use the devtools in codepen realize that codepen is a webpage and your preview of your code is an iframe which puts a webpage in a webpage so there is another
<html>
<head>
<body>
etc
When codepen saves changes I make in the editor windows the devtools can loose focus so that I’m not on the element I thought and I need to inspect again to get back.
