How can I make this container responsive? - html

Question

I am trying to make the container responsive, but while going through developer options and checking in responsive mode, the container did not get placed correctly. I have simply added the margins to the button of the colors on the left side of the container. I am attaching the code and screenshots for reference.
.color_selector {
align-items: center;
position: absolute;
height: 516px;
width: 59%;
background-color: black;
border-radius: 10px;
}
.grey_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-top: 35px;
margin-right: 800px;
background-color: grey;
border: 3px solid white;
}
.grey_btn:hover {
border: 3px solid #5998f7;
}
.blue_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-right: 800px;
margin-top: 15px;
background-color: #1f316b;
border: 3px solid white;
}
.blue_btn:hover {
border: 3px solid #5998f7;
}
.brown_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-right: 800px;
margin-top: 15px;
background-color: #57191a;
border: 3px solid white;
}
.brown_btn:hover {
border: 3px solid #5998f7;
}
.white_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-right: 800px;
margin-top: 15px;
background-color: #e8e8e8;
border: 3px solid white;
}
.white_btn:hover {
border: 3px solid #5998f7;
}
<div class="color_selector">
<button class="grey_btn"></button>
<br></br>
<button class="blue_btn"></button>
<br></br>
<button class="white_btn"></button>
<br></br>
<button class="brown_btn"></button>
</div>
How do i make it responsive, the buttons and the container?

Answer 1

For starters, remove the absolute positioning on .color_selector. Then you can use a media query to adjust the container size on smaller devices. See the example below.
.color_selector {
align-items: center;
height: 516px;
width: 50%;
background-color: black;
border-radius: 10px;
}
/* sample media query */
#media only screen and (max-width: 800px) {
.color_selector {
width: 100%;
}
}
.grey_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-top: 35px;
margin-right: 800px;
background-color: grey;
border: 3px solid white;
}
.grey_btn:hover {
border: 3px solid #5998f7;
}
.blue_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-right: 800px;
margin-top: 15px;
background-color: #1f316b;
border: 3px solid white;
}
.blue_btn:hover {
border: 3px solid #5998f7;
}
.brown_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-right: 800px;
margin-top: 15px;
background-color: #57191a;
border: 3px solid white;
}
.brown_btn:hover {
border: 3px solid #5998f7;
}
.white_btn {
border-radius: 50%;
width: 51px;
height: 51px;
margin-right: 800px;
margin-top: 15px;
background-color: #e8e8e8;
border: 3px solid white;
}
.white_btn:hover {
border: 3px solid #5998f7;
}
<div class="color_selector">
<button class="grey_btn"></button>
<button class="blue_btn"></button>
<button class="white_btn"></button>
<button class="brown_btn"></button>
</div>