We Keep Coding

When many list are added, the page is obscured. How can I fix it?

Thank you! Now, It works very well :D
I have a CSS problem.
I use overflow: auto. But, when many list are added, the page is obscured. How can I fix it?
I used parcel-bundler. Here is my app. Link
Help me.

This is common when using flexbox to center a box vertically. You can fix it by adding margin: auto to .todo
.todo {
background: #fff;
min-width: 500px;
width: 80%;
padding: 10px;
border-radius: 10px;
position: relative;
margin: auto;
}

Remove you overflow:auto; from wrapper and set it to todo with max-height: 100%;
(wait I saw a problem created on your button then because it is loosing its position please use #AdamAzad answer)

How do I display 4 columns in the product carousal instead of the current 5 columns?

I am trying to figure out what code to edit in order to display 4 columns instead of the current 5 for the products towards the bottom of this page: https://zadroinc.com/this-is-a-test
It's built on bigcommerce, so I may not have access to all the jquery/javascript files, but I was hoping someone could point me in the right direction or maybe I could insert a script to overwrite it? Any suggestions?
Thank you!!
Edit: I want to display 4 products instead of 5 products.

to get the results you are looking for you need to change some CSS in your styles.css file:
.Content .ProductList li {
margin: 0 0 20px 75px !important; /* modified! */
}
this will get you what you want but changing styles like this is NOT recommended cause this little change might give you headaches in the future :)

If you want to display only first 4 product then please add below css code.
.Content .ProductList li:nth-of-type(1n+4) {
display:none;
}

Look for a div right under Mobile_Banner class, it has an inline style:
margin: auto;
width: 84%;
text-align: center; <--Add this;
Now go to his children, to control their look look for a file called this-is-a-test at line 370:
.sml_cat_cont_fifth, .sml_cat_cont_fourth, .sml_cat_cont_second, .sml_cat_cont_third, .sml_cat_cont_first {
width: 200px;
margin: 20px 20px 20px 20px;
overflow: hidden;
display: inline-block;
float: none;
Next on the same file, at the next line 371 change the css for .itemzoom:
.itemzoom {
height: 100%;
width: 100%;
}
Now go to cd-styles.css file and change it to:
.itemzoom {
position: relative;
margin: 2%; <--remove this
overflow: hidden;
}
You get this:
https://imgur.com/a/H2IVoJ1
PS:
By the time I was writing this I think you changed your original question, I thought you wanted all 5. Now to display 4, you can add to any of those divs (.sml_cat_cont_first, second etc) display:none and the rest will be automatically centered.

Angular Material layout conflicts with my original CSS

I just started to learn Angular Material. The problem is that after I include the Angular Material script, my original CSS gets messed up. The margin-top simply doesn't work, no matter what value I set.
Could anyone help me?
My login form CSS is like this:
#login {
width: 300px;
height: 240px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background: #EEEEEF;
padding: 30px 30px 0px 30px;
}
The margin-top conflicts with Angular Material. How should I solve that?

try to keep important for margin-top:100px !important;
If not solved try to keep your code so that we can help you

Give it a position:absolute?
Or am I completely missing the point..typing to pass minimum

Why does the on mouse in even gets triggered when the mouse is not in the button?

I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.

The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:

The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.

Anyone know how to get a browser status bar like the one in Digg.com?

If you have a look at digg.com, there is a persistent status bar (i.e. the Digg version number etc).
I have played with a few jQuery plugins, but they don't anchor fully to the bottom like that one in Digg.. I have tried to look at the CSS, but can't quite understand what bits are needed..
Any ideas/pointers very welcome?
<--- EDIT: SOLUTION --->
Thanks to the answer/comments below, I have ended up with the follow (just in case anyone else wants a basic working version to get going..):
The CSS is:
.footer-bar {
background: -webkit-gradient(linear,left top,left bottom,from(#F3F3F3),to(white));
background: -moz-linear-gradient(top,#F3F3F3,white);
background-color: white;
border-top: 1px solid #AAA;
bottom: 0;
color: #333;
font-size: .833333333333em;
font-family: Arial Narrow;
height: 12px;
padding: 5px 0;
position: fixed;
right: 0;
text-align: left;
width: 100%;
z-index: 5;
}
Obviously you can change the relevant bits, and then of course in my case I just have the following HTML:
<span class="footer-bar">Some text in the footer/status bar that stays there even when you scroll</span>
So there you are - thanks to all the others and of course the guys who originally created it.. CSS is still a bit of a mystery in some cases to me!

You want position: fixed on the element. No JavaScript.
Fixed positioning makes the element relevant to the viewport.