Develop Reference

How to set width of scollbar overlay-y

HI I have a vertical scrollbar. because I have some icons. And if the icons are increasing. you can't see the bottom icons anymore. So I added a scrollbar. But now the scrollbar is pressing half of the icons. So the icons are not visible totally anymore.
so this I have as css:
#makelist {
width: 250px;
/* max-height: 100%; */
max-width: 300px;
scrollbar-width: 500px;
position: absolute;
top: 0;
left: 0;
margin-left: -210px;
background-color: #91c7e1;
transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
z-index: 1;
margin-top: 70px;
overflow-y:overlay;
height: 700px;
}
this is html:"
<div id="makelist">
<ul id="makelistul"></ul>
</div>
So my question is: How to make the width of the scrollbar wider?
Thank you

You can hide a scrollbar:
.element::-webkit-scrollbar {
display: none;
}
But it's not the best practice, you should give a hint to a user that it's scrollable element by adding shadows or arrows at the ends of the element
For cross-browser compatibility add also:
scrollbar-width: none;

Using transform and element positioning/size

I'm not sure if this is really solvable/possible but...
I'm trying to implement a particular animation where my screen is divided in 2 vertically on the first page, but after doing some sort of event (wheel, scroll, click, etc), the layout will animate smoothly to divide the screen horizontally.
If you hover over the first example, I tried to just rotate both inner elements, and then tried to resize the elements based on the new, rotated position. This did not work well.
As you can see, as the elements rotate, there are several issues:
They don't rotate perfectly in sync
You can see the ugly whitespace of the container behind it as it rotates
After rotating, the elements do not fill the container perfectly
I have tried many different things, like using z-index, absolute positioning, tried putting the inner elements in another nested container and then rotating the container, then adding height and width, but again the sizes didn't fit the container. I cannot seem to figure out how to make this work (without Javscript, if possible).
Essentially, the animation I have in mind would make the transition from the Initial Stage to the Final Stage seamless (ie. You wouldn't be able to see the whitespace in the background of the container, and the starting vertical line of separation would just slowly rotate to a horizontal line, while changing the position of the inner elements)
I hope this makes sense? I've been trying to get this animation to work for days...and I am exhausted of options/not creative enough/don't have the knowledge I need; help would be greatly appreciated.
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.container:hover .left {
transform-origin: 100% 50%;
transform: rotate(90deg);
width: 100%;
}
.container:hover .right {
transform-origin: 0 50%;
transform: rotate(90deg);
width: 100%;
}
.left {
background-color: purple;
height: 100%;
width: 50%;
transition: all 2s;
}
.right {
background-color: yellow;
height: 100%;
width: 50%;
transition: all 2s;
}
.container2 {
display: flex;
flex-direction: column;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.left2 {
background-color: purple;
height: 50%;
width: 100%;
}
.right2 {
background-color: yellow;
height: 50%;
width: 100%;
}
Initial Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Final Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container2">
<div class="left2">
I have content in here that I need fit within this container
</div>
<div class="right2">
I have content in here that I need fit within this container
</div>
</div>

Instead of adding transition to left/ right divs add it to the container div
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
transition: all 2s;
transform: rotate(0deg);
}
.container:hover {
transform: rotate(90deg);
width: 100%;
}
Also Remove transitions and transforms from left right divs

% based, fixed and absolute positioned, nested elements?

Image:
I have a container div (yellow) which I’d like to keep at 50% width of the window. A child of that container is an image div (purple) that stretches to 100% of the parent container’s width. and there’s a sticky label (pink) on top of the image div (position: absolute so it can be offset relatively to the image). I'd like to keep that entire half of the screen fixed positioning so it stays sticky as I scroll.
There’s also a title under the image, and that title needs to be visible no matter if someone shrinks the window vertically. So in that scenario the image div should shrink vertically, if needed, in order for that title to be shown.
Basically I'm trying to have the image div always be 100% width of the parent container div. With the image div having a max % height so it can shrink vertically. Or have it keep a fixed aspect ratio (3:4 or whatever) when it shrinks vertically.
I'm trying to avoid using fixed pixels, or ems, in the entirety of my CSS. since the website needs to be stretchy/‘fluid’ vertically, because that title under the image has to show.
HTML looks roughly like:
<wrapper>
<left-column>
<normal text and scrollable stuff>
<right-column-yellow>
<image sticky label-pink>
<image div-purple>
<image title>
Sorry if this is damn confusing my brain is fried! Can anyone pls help me?

You can divide your left and right panel by using position fixed.
If I'm not wrong with your description, this is the answer.
<div class="wrapper">
<div class="left">
<p><!--Some very long text--></p>
</div>
<div class="right">
<div class="image">
<div class="label">Label</div>
<div class="title">Title</div>
</div>
</div>
Some CSS
.left,.right{
position: fixed;
width: 50%;
height: 100%;
display: inline-block;
}
.left{
left:0;
top: 0;
overflow: auto;
}
.right{
right: 0;
top:0;
background-color: yellow;
}
.right .image{
position: relative;
width: 100%;
height: 50%;
top: 50%;
left: 0;
background-color: #fff;
transform: translateY(-50%);
}
.right .image .label{
position: absolute;
left: 0;
right: 0;
top: -10px;
text-align: center;
width: 200px;
background-color: pink;
margin: auto;
}
.right .image .title{
position: absolute;
left: 0;
right: 0;
bottom: -40px;
text-align: center;
width: 200px;
background-color: #000;
margin: auto;
color: #fff;
font-size: 30px;
}
You can refer to my codeine as well.
https://codepen.io/masonwongcs/pen/WMJGZb

How do i make my image move across the page even when the resolution of screen changes

I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>

maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}

Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/

Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.

What is the best way to approach this background image issue?

My Goal:
So I am making a webpage with a map of the USA as the "background image" and on top of that map I have about 10 markers pointing to specific location. The markers are NOT part of the picture thats just me adding them with absolute positioning and top and left with a percentage.
The Problem:
As I scale down the page or scroll up and down the markers that I have set with absolute positioning begin to move out of the spot they are suppose to be on because the background-image is getting smaller do to it displaying 100%.
The Question:
How can I achieve what I want with the markers on the map where they are suppose to be not moving as the window is being scaled down?
Now I know of only 1 solution and this solution can take a VERY LONG TIME. What I was thinking is instead of positioning the markers that I want on the map with percentage I can do it with pixels and then use a TON of media queries and keep on adjusting it. Not only is this solution going to take extremely long but it also does not seems like the correct way to go about this.
HTML:
<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div> <!--the marker that is positioned absolute-->
</div>
</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body{ overflow: hidden; }
.main-content{
background: url('assets/img/map1.jpg') no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap{
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.marker{
height: 40px;
width: 40px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -20px;
}

The problem is that your background image's size is set to 100%: background-size: 100%. This means that when the browser tries to scale the content, the background does not scale with it (it stays 100%).
Your best bet is to remove the background-size property completely. This allows the markers to stay in place when the page scales, however, you won't get the full-screen background effect that you currently have (unless you have a larger image).
The background will still move, however, once the browser window width is less than the image's width. This is because you have the background-position set to top center. The center is what causes it to move once the browser window width is less than the image width. Change center to left and it will fix that issue. You'll also need to set the marker's container to be based to the left as well for this to work on wider screens though. Basically, removing all center properties would help, but the screen wouldn't be centered on a wide screen.

Try substituting css :before pseudo element for .marker ; set percentage unit values utilizing calc()
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body {
overflow: hidden;
}
.main-content {
background: url(http://lorempixel.com/400/300) no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap {
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.main-content:before {
content: " ";
height: calc(12.5%);
width: calc(5%);
border-radius: 100%;
background-color: red;
position: absolute;
top: calc(50%);
left: calc(50%);
margin-top: calc(1%);
}
<div class="container main-content">
<!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div>
<!--the marker that is positioned absolute-->
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/o79rpawc/