Yes, it's another tribute page asking for feedback

All feedback very welcome! I tried to model as closely as possible the layout of the example page. It looks OK on Codepen in Firefox, but some things aren’t working when I look at it on my mobile – the links in the list items won’t open, for example, though the ones at the bottom of the page work – and I don’t know why. Also, I saved the page on GitHub, and when I open the GitHub version of the page on my mobile it’s not responsive at all :persevere:

 

The page on codepen: https://codepen.io/zeebear/full/ELmKzQ/

And the page on GitHub: https://zeebear.github.io/kermit/

1 Like

Image isn’t centered, tried a couple things but couldn’t fix it.

That’s a nice tribute page, well done!

For you image centering problem: https://getbootstrap.com/docs/4.1/content/images/#aligning-images

The links in the list items work on my phone (Nexus 5X, Android 8/Oreo). What OS do you use on your phone?

The responsiveness not working on your phone may be because of a missing meta tag that tells the websites that it’s being displayed on a phone: https://github.com/twbs/bootstrap/issues/1813

1 Like

Thanks for your feedback :slight_smile: I changed something in the div that contains the image, but I don’t know if it fixed it or not. Could I ask you what you’re using to view the page? The image looks centered in the three laptop browsers I’ve tried (Firefox Quantum, Safari, Chrome on a mac), and on Safari, Firefox and Mercury on iOS – so I can’t tell if I’ve fixed the problem or not.

Thanks for your feedback! You were right about the missing meta tag – I added the following to the head

<meta name="viewport" content="initial-scale=1">

(as found here: https://stackoverflow.com/a/20805610 ) and now it scales on my mobile! :tada: I’m using Safari and Firefox on iOS.

For the image, I tried one of the options from the link you gave, but I can’t see if it fixed the problem or not, since it looked OK on my browsers…

It was Chrome on Win10, don’t know the version.

The image was initially not centered here too, but now it is! Great job fixing the issues on your page! :slight_smile:

One more thing: You typically want to avoid using inline styling (<img style="max-width: 100%">) and instead separate the css and html as much as possible. Suppose you have a large amount of html and css pages, it’s way easier as a developer to maintain the pages if you have everything in one place.

Thanks! I’ve added one more thing to the CSS just in case to help with the resizing issue:

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

as found here: Quick Tip: Don’t Forget the Viewport Meta Tag

And I think I’ve now achieved strict separation of html and css without breaking anything – I moved the inline styling to the CSS section. I should start training the good habits early, I suppose!

Great!! Yes, I like your way of thinking. :slight_smile:

By the way, an interesting topic in this case is CSS Specificity. It teaches you how you can access and modify the CSS properties of an HTML element without breaking other elements in your code. Especially useful when you want to use frameworks like Bootstrap or MDL, which can be a pain if you want to customize something. :slight_smile:

2 Likes

Very, very nice.

I wish the text at the bottom was smaller, like the Li text