Replace the width: 600px with max-width:600px; in the container.
I suggest setting the font size based on rem units and adjusting breakpoints for font sizes on your html element to achieve the desired sizing. You can refer to this topic: Rem not compatible with media queries?
Additionally, consider removing padding from the container when the screen width is below a certain threshold to ensure proper alignment with your input.
Edit
To correctly position the container labels, make them absolute:
Firstly, add position:relative; to the container:
.label-container{
position:relative;
}
Then, apply position: absolute; to the labels:
.label-slider{
position: absolute;
}
Finally, adjust their positions using absolute positioning according to the following rules:
.label-slider:nth-child(1) {
left:0;
}
.label-slider:nth-child(2) {
left:25%;
transform: translateX(-25%);
margin-left: 1%;
}
.label-slider:nth-child(3) {
left:50%;
transform: translateX(-50%);
margin-left: .5%;
}
.label-slider:nth-child(4) {
right: 25%;
transform: translateX(25%);
margin-left: 1%;
}
.label-slider:nth-child(5) {
right:0;
}
FULL DEMO
@import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
@import url("https://fonts.googleapis.com/css?family=Dancing+Script");
body {
font-family: "Catamaran", sans-serif;
background: #2b8aeb;
}
.container {
font-family: "Catamaran", sans-serif;
max-width: 600px;
margin: 30px auto 0;
display: block;
background: #fff;
padding: 10px 50px 50px;
border-radius: 4px;
box-shadow 0 6px 16px rgba(0,0,0,0.15)
}
.title {
text-align: center;
font-family: "Dancing Script", cursive;
color: #3949ab;
font-size: 35px;
}
.label-container {
margin-top: 0.5rem;
-webkit-flex-basis: 100%;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
margin-bottom: 50px;
position : relative;
}
.label-slider {
color: #3949ab;
font-size: 14px;
font-weight: 700;
text-align: center;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
position: absolute;
}
.label-slider:nth-child(1) {
left:0;
}
.label-slider:nth-child(2) {
left:25%;
transform: translateX(-25%);
margin-left: 1%;
}
.label-slider:nth-child(3) {
left:50%;
transform: translateX(-50%);
margin-left: .5%;
}
.label-slider:nth-child(4) {
right: 25%;
transform: translateX(25%);
margin-left: 1%;
}
.label-slider:nth-child(5) {
right:0;
}
.slider-container {
width: 100%;
margin-top: 5px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #dde5ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
input[type="range"],
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
border-radius: 5px;
background: #dde5ff;
outline: none;
transition: opacity 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #2b8aeb;
cursor: pointer;
outline: none;
}
input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #1492ea;
cursor: pointer;
outline: none;
z-index: 10;
}
input[type="range"]:focus {
outline: none;
}
.ticks {
font-family: "Catamaran", sans-serif;
color: #3949ab;
font-size: 14px;
font-weight: 700;
display: flex;
justify-content: space-between;
height: 6px;
margin: 0 10px 0 15px;
counter-reset: count -1;
}
.ticks > div {
height: 100%;
width: 1px;
background: silver;
counter-increment: count 1;
}
.ticks > div:nth-child(5n - 4) {
height: 200%;
}
.ticks > div:nth-child(5n - 4)::before {
display: block;
content: counter(count,decimal);
transform: translate(-50%, 100%);
text-align: center;
width: 16px;
}
<body>
<div class="container">
<p class="title">Range Sliders</p>
<h4>Range Slider without steps</h4>
<div class="slider-container">
<input type="range" min="0" max="4" class="slider">
</div>
<div class="label-container">
<div class="label-slider">None</div>
<div class="label-slider">1</div>
<div class="label-slider">2</div>
<div class="label-slider">3</div>
<div class="label-slider">4+</div>
</div>
</div>
</body>