Tribute page - Questions, Comments, Ridicule?

Code Feedback
1

Hello - Below is a link to my tribute page. Please share your thoughts or critique.
Thank you.

My Page
My Code

2

Design will get better over time but the code looks fine. Next is to work on making web pages that are responsive, ie. adapts to changes in the browser window size.

1 Like
3

Thank you Dominic.
I made changes and the page is more responsive now.

4

nah. it still doesnt look right on small screens. when you get to the responsive design curriculum they will teach you how to do it the right way.

1 Like
5

If you add flex-wrap: wrap; to #links and #tribute-link1 it will help with the responsiveness. You will likely want to add some margin to the content inside (on .circles and .circles2)

1 Like
6

  • On my phone the social bar’s links are flowing off the “buttons”. It might be easier to treat it as a navbar – i.e. a list of links with some css. Or just make the buttons bigger.

  • I find your site looks like it’s in desktop even in mobile. To make it look better, you could make it more “height” than “width”. I.e. width: 100px; height:200px

Overal your site looks much better than anything I could pull off. Good job.

1 Like
7

Thanks Everyone.
Adding flex-wrap got me most of the way there.
I also changed a few dimensions.
The page should now be responsive…or responsive-er.

The stat boxes ( “.circles”) under the the top image will tranform:scale(1.5) on hover using my android phone, linux laptop, chrome, and firefox but NOT on a iphone6 or ipad. I assume this means I’m missing an iphone/apple trick.
I added -webkit-transform:scale(1.25); to .circles:hover but that did not work.

Thanks again for the feedback and suggestions!

8

I don’t think it is very likely that the user will tab on the .circles boxes, there is really no “motivation” to do so.

Based on this stackoverflow thread I’d suggest trying one of the following things.

  1. Add cursor: pointer;. This might not work anymore, you may also have to add it to the body as well to un-scale when tabbing on the page (thread)
.circles {
  cursor: pointer;
}
  1. Add an event handler to the divs (onclick="void(0)").
<div id="circle1" class="circles" onclick="void(0)">
  1. Add a script to the page, as it is using Jquery you would need that as well.
(function() {
  $("*").on('touchstart', function() {
    $(this).trigger('hover') ;
  } ).on('touchend', function() {
    $(this).trigger('hover') ;
  } ) ;
})() ;

I should say I didn’t test any of this.