Tribute page - Karel Čapek

Code Feedback
1

Hello,

I would like to get any feedback on my tribute page. Thank you in advance.

https://codepen.io/pawot/pen/oNYErjx

3 Likes
2

Welcome to the forums @pawot. Your page looks good. Some things to revisit;

  • Your page is not displaying the way you want. You’re using the strong element in your HTML but it’s not displaying as such. This is because you only selected the normal weight. Select both the normal and bold weight to import and you’ll see the difference.
    • A suggestion, you don’t have to do it. When you have the bold text showing correctly you may want to think about getting rid of the bullet points.
  • overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content. (You don’t want to include this just to get rid of that horizontal scrollbar)
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia” is not accessible
3

Thank you for valuable advice, i tried to improve it. As for overflow-x: hidden; I have searched that this is the solution to fill the whole screen with an element horizontally and avoid the scrollbar. Is there any better way how to do it?

4

Good job on cleaning things up. Your page looks good.

That’s not what overflow-x: hidden; does. Maybe take a quick review here and do some additional searching.
Your using it on the body element which is a block level element and automatically takes up all available width.
If you remove it from your page you’ll see that there’s a horizontal scrollbar. As previously mentioned, this is not the way to avoid the horizontal scrollbar.

As a hint, add the following line to the article declaration;
border: solid 1px red;
When you remove the overflow-x: hidden; line and narrow your browser you’ll see the horizontal scrollbar that was previously hidden. There’s a property: value; pair in the article declaration that’s causing the scrollbar.

5

Hi! @pawot your page is good but few things to revisit:

  • Your image of Karel Capek does not load make sure you’ve used the correct URL
6

loved it. I love your color selection. keep it up!

7

I got rid of the overflow-x and all negative margins and set margin: auto on body instead. It seems to be working and on small devices article fill the whole screen horizontally without scrollbar. But still cannot figure out how to set timeline and sources to do the same without negative margins.

8

Thank you for feedback. I can’t figure out, where the problem might be, because it works well on my computer, so the link is probably correct.

9

Thank you very much.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.