Tribute page, check it out!

Code Feedback
1

Tribute page. Any feedback appreciated.

2

Its nice but:

The image does not load

Please use flexbox and media query’s w/ a relative height to align your acting and inventing into column on smaller screens

Just don’t use fixed heights, you can use min-width to keep it >= but when you resize the content has nowhere to go

–>http://quirktools.com/screenfly/
(enable auto scrolling)

image
image1920×1040 224 KB

Notes:

Please hit the reply button or i do not get notified.

List of helpful websites for web design (and inspiration) --> https://codepen.io/Mike-was-here123/post/check-out-these-sites

3

Thank you for the feedback. The image shows up for me, but I see what I can do. I will fix the columns too.

4

Hi,

If I zoom in far enaugh two seperate scrollbars appear for the Acting and Inventig sections.

It is a little bit confusing

5

Update, changes made. Please any additional suggestions or comments would be very helpful.

6

Fixed issue. Thank you for your feedback.

7

Thank you for your feedback. I have made some changes and I think the result is much improved.

8

I do too. One last thing.

Use flexbox and media querys.

#tribute-info {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width: 700px) {
 #tribute-info {
  flex-direction: column;
 }
}

Now this will leave you with:

image
image1920×1040 190 KB

Now you can go through and inside that media query and change the width of #act and #invent (100%).

If you want to try and center the list, try a concept like this:

image
image1929×1041 179 KB

(https://i.postimg.cc/jjF9PhG0/FCC-survey-Page-align-content.png)

You can use media query’s to change the width of the blue box on smaller and smaller screens (using multiple). 30% - 60% - 100% of the black box.