We Keep Coding

Bulma Carousel - make arrows larger

How can you make the arrows on the side much larger (so they'll be impossible to miss)?

Thanks to #epascarello, I looked into the styles used for these, and the following does the work:
.slider-navigation-previous {
width: 80px;
height: 80px;
}
.slider-navigation-next {
width: 80px;
height: 80px;
}
Or any other size than 80px for whatever size you want it

Dynamic placeholder height

So I have a list with a position: fixed button in the bottom of the viewport. Because this button is position: fixed the last element of the list and part of the second last appear beneath the button, so the user can't see them properly.
What I tried so far:
adding a padding-bottom to the container with the height of the button. Issue with this approach: in different languages the height of the button is different, so it's good in only a couple of scenarios.
making the button position: sticky instead of fixed. Issue with this approach: the list is in a overflow-y: scroll container, so this approach does not work in iOS. Again, only good in a couple of scenarios.
adding a div after the list and controlling its height with javascript. Issue with this approach: does the job, but it's not very elegant.
Does anyone know of a better approach other than my third one? When I started with this I thought I might have to use JS for it, but position: sticky gave me hope that it would be possible with only CSS.

Since your list is fixed, this is an example of what I do for buttons on the bottom of my screen. Although it would be nice if you showed an example of your problem, cause it's hard to tell.
Obviously, you'll have to edit the text's positioning if you wanted, but the principle is what matters, and everything is responsive. Each individual <li> element is 10% high and 20% wide no matter the size of the screen.
CSS:
<style>
ul { position: fixed; width: 100%; height: 10%; bottom: 0%; left: 0%; background-color: deepskyblue; list-style-type: none; margin: 0; }
li { position: absolute; }
.a { width: 20%; height: 100%; background-color: red; left: 0%; }
.b { width: 20%; height: 100%; background-color: orange; left: 20%; }
.c { width: 20%; height: 100%; background-color: yellow; left: 40%; }
</style>
HTML:
<ul>
<li class="a">AAA</li>
<li class="b">BBB</li>
<li class="c">CCC</li>
</ul>

How to make the progress bar with html css javascript

How to make the progress bar Like the image below

I think the easiest way would be to use something like:
css:
.progress
{
position:relative;
width: 100px;
height: 100px;
}
.progressUnder
{
position: absolute;
width: 100%;
height: 100%;
background-image: url('backgroundUnder.jpg');
}
.progressOver
{
position: absolute;
width: 100%;
height: 0%;
background-image: url('backgroundOver.jpg');
}
.progressPercent
{
position:absolute;
top: 40px;
width: 100%;
text-align: center;
}
and html:
<div class='progress'>
<div class='progressUnder'/>
<div class='progressOver' />
<div class='progressPercent'>0%</div>
</div>
and then use javascript to animate the percent height of div.progressOver, as well as the .progressPercent counter.

You need to use a animation I think.
Aswell as The Molecule says. You need to use height for that color. I guess you know how an normal one works. First try to out create a circle, use the height as The Molecule explained, then you need to make the inside of the circle transparent/unneeded. As that is done the heights will be displayed in the circle. That how you do it, never done it myself tho since i dont use custom loading bars.

height: 100% background sidebar doesn't work

how can I add background height: 100% for aside?
aside,
.side-nav {
width: 250px;
float: left;
margin-right: 15px;
background-color: #2b2b2b;
}
How can I fix the sidebar (aside)?

With CSS3 you can actually use the "vh" designation (based on viewport height).
For your example, you would just add "height: 100vh" to your css.

I have created a small example. Please review jsfiddle link below.
<https://jsfiddle.net/whfukm5p/>

I think what you need is a navigation that is fixed rather than float.
aside,
.side-nav {
width: 250px;
margin-right: 15px;
background-color: #2b2b2b;
position: fixed;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
}
Height is a relative value based on the parent element, but since Window doesn't have a default height, relative height on elements can't be used.
If you insist in using relative height, you will need to set it via javascript or give it a default value.

JS component not covered by fixed header

I have a fixed header (which covers the content that disappears when I scroll down). But it doesn't cover a js component caled "Jssor Slider". I've seen simular effects with other js components on the net. Any ideas why this happens?
header {
background: #f00;
height: 136px;
width: 100%;
position: fixed;
text-align: center;
}
Here's the fiddle:
http://jsfiddle.net/e6k4h25g/

If you do not have to support older browsers go with
header {
background: #f00;
height: 136px;
width: 100%;
position: fixed;
text-align: center;
z-index:20;
}
z-index can be anything. Just make sure it is higher than the z-index of your sliding element.
updated fiddle:
http://jsfiddle.net/e6k4h25g/1/