Tribute page, check it out!

Tribute page, check it out!
0

#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)


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:

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:


(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.