linear-gradient | A visualization tool for CSS linear-gradients | Animation library

It's because that shape is made with linear gradient as background, so you just need to adjust gradient percentages:

From

background: linear-gradient(25deg, yellow 50%, transparent 50%);

to

background: linear-gradient(25deg, yellow 20%, transparent 20%);

You could try using element.scrollTop to save the position of the scrollbar and then use the saved value to set the scrollTop property to where it was when the timed function is called.

(https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop?retiredLocale=it - https://www.javascripttutorial.net/dom/css/get-and-set-scroll-position-of-an-element/)

In your code you are adding new results to the right. After some searches the new results leave the view port and you can't see them. You can remove display: flex; in .meanings to change this behavior:

The hover state for the second button is assigned the same absolute X and Y positioning values as the first button so it's appearing on top of the first button during its hover state. There's no need to restate an element's X and Y positioning on hover or active pseudo classes. The element will retain its already assigned positioning.

The canvas draws OK at viewport dimensions 1920 x 1080.

This snippet (which is vanilla JS for demo purposes) draws the canvas as given in the code in the question and then scales it and its position to fit the current viewport.

It denotes the tag inside another HTML element with the class name topnav. For an example, it may look like this:

I managed to solve the challenge.
I rebuilt the project completely, made it with divs and flexbox, and filled the slots by using simple JavaScript (instead of using margin-left in the SCSS).
Also, I built the project in React.

If anyone is interested, here are the final results:
https://github.com/orassayag/job-interview-exercises/tree/master/jobs/job-13/project

Since the size of the element is increased by the padding-bottom, other elements are also affected.　　 Once you put padding-top: 5px to the state before the change as shown below, it will work.　　

• You need to set a specific height for your "footer-container", let's asume like 30vh height.
• You use the footer height we just add (30vh) as padding-bottom for the main-container + set box-sizing to => "border-box" Box-sizing allows the padding of the selected element to be "part of" the height (100vh)
• Maybe you will need to prevend some wrapping or overflow on small screen, even if that's not super pretty, i sould add an overflow:auto to footer-container.

So the result CSS :