I have a container with two divs in it but for some reason their not centering themselves correctly, I am trying to make my website responsive currently. I would like the too html and css divs to stay in the center of the page no matter screen size. If you resize you’ll see the divs move closer to the right and starts to hide itself.
Here’s my code:
.skills-section {
width: 100%;
height: 100%;
padding: 20px;
}
.skills-section .title p {
font-family: "Roboto", sans-serif;
color: rgb(5, 1, 22);
font-size: 40px;
text-align: center;
margin: 10px;
}
.leftside-rightside-wrapper {
display: flex;
height: 100%;
}
.leftside-rightside-wrapper .leftside {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
}
.leftside .circle-profile-holder {
min-width: 310px;
height: 310px;
border-radius: 50%;
border: 1px solid #050416;
box-shadow: 2px 2px 12px 2px #efefef;
position: relative;
padding: 4px;
}
.circle-profile-holder img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.circle-profile-holder .profile {
width: 150px;
height: 200px;
box-shadow: 2px 2px 12px 2px #efefef;
background: #fff;
position: absolute;
bottom: -70px;
right: 0;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #050416;
}
.circle-profile-holder .profile .img {
overflow: hidden;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #cecccc;
margin: 10px;
padding: 4px;
}
.circle-profile-holder .profile .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.circle-profile-holder .profile .description {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.leftside-rightside-wrapper .rightside {
width: 80%;
height: 100%;
display: grid;
grid-template-columns: 400px 400px;
grid-template-rows: 250px 250px;
justify-content: center;
}
.rightside .inform-wrapper {
border: 1px solid #efefef;
border-radius: 4px;
padding: 10px;
margin: 12px;
display: flex;
flex-direction: column;
}
.rightside .html-content {
border: none;
background: rgb(234, 234, 248);
border-top-left-radius: 35%;
border-top-right-radius: 67%;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 30px;
}
.rightside .css-content {
background: rgb(226, 224, 224);
border-top-left-radius: 32%;
border-top-right-radius: 54%;
border-bottom-left-radius: 125px;
border-bottom-right-radius: 40%;
border: none;
}
.rightside .js-content {
background: rgb(255, 255, 203);
border: none;
border-top-left-radius: 48%;
border-top-right-radius: 30px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 140%;
}
.rightside .php-content {
border: none;
background: rgb(255, 252, 252);
}
.rightside .inform-wrapper .top {
width: 100%;
height: 40%;
display: flex;
flex-direction: column;
align-items: center;
}
.rightside .inform-wrapper .top p {
text-align: center;
font-size: 26px;
font-family: "Poppins", sans-serif;
}
.inform-wrapper .top .progress-bar {
width: 230px;
height: 25px;
background: rgb(82, 82, 245, 0.5);
border-radius: 15px;
margin: 10px;
}
.inform-wrapper .top .progress-bar .pg-html {
width: 90%;
background: rgb(82, 82, 245);
height: 100%;
border-radius: 15px;
}
.inform-wrapper .top .progress-bar .pg-css {
width: 84%;
background: rgb(82, 82, 245);
height: 100%;
border-radius: 15px;
}
.inform-wrapper .top .progress-bar .pg-js {
width: 15%;
background: rgb(82, 82, 245);
height: 100%;
border-radius: 15px;
}
.inform-wrapper .top .progress-bar .pg-php {
width: 35%;
background: rgb(82, 82, 245);
height: 100%;
border-radius: 15px;
}
.rightside .inform-wrapper .bottom {
width: 100%;
height: 60%;
}
.inform-wrapper .bottom p {
font-family: "Roboto", sans-serif;
font-size: 15px;
color: rgb(2, 6, 19);
padding: 15px;
}
/*Contact Section*/
.contact-section {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-section .title-wrapper {
width: 100%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
}
.contact-section .title-wrapper p {
font-family: "Roboto", sans-serif;
font-size: 45px;
}
.contact-section .form-wrapper {
width: 80%;
height: 80%;
border-radius: 8px;
border: 1px solid #efefef;
}
.contact-section .form-wrapper form {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-section .form-wrapper input {
margin: 10px;
width: 800px;
border: none;
border-bottom: 1px solid #efefef;
padding: 15px;
outline: none;
font-family: "Roboto", sans-serif;
color: rgb(0, 0, 32);
border-left: 2px solid rgb(238, 53, 84);
}
.contact-section .form-wrapper input::placeholder {
font-family: "Roboto", sans-serif;
color: rgb(163, 163, 163);
}
.contact-section .form-wrapper form #textarea {
border: 1px solid #efefef;
margin-left: 10px;
outline: none;
height: 200px;
width: 800px;
padding: 10px;
box-sizing: border-box;
resize: none;
}
.form-wrapper form #textarea::placeholder {
color: black;
font-family: "Roboto", sans-serif;
}
.form-wrapper .information-submits {
display: flex;
justify-content: space-between;
}
.form-wrapper .information-submits p {
font-family: "Roboto", sans-serif;
color: rgb(0, 0, 12);
font-size: 15px;
width: 650px;
margin-left: 10px;
margin-top: 10px;
}
.form-wrapper .information-submits .submit-btn {
width: 150px;
margin: 10px;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
padding-bottom: 15px;
border: none;
background: rgb(1, 1, 12);
color: #fff;
border-radius: 2px;
cursor: pointer;
}
.contact-section .extra-information {
width: 80%;
padding: 20px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.contact-section .extra-information p {
font-family: "Roboto", sans-serif;
}
.contact-section .extra-information .links-to-social-medias a {
margin: 10px;
color: black;
font-size: 24px;
}
/*
Here's the responsive css which is supposed to place my styles into effect:
*/
@media screen and (max-width:1170px) {
.skills-section .leftside-rightside-wrapper .rightside {
display: flex;
flex-direction: column;
padding: 40px;
justify-content: flex-start;
}
.skills-section .leftside-rightside-wrapper .rightside .html-content {
border-radius: 0;
}
.skills-section .leftside-rightside-wrapper .rightside .css-content {
border-radius: 0;
}
.skills-section .leftside-rightside-wrapper .rightside .php-content {
display: none;
}
.skills-section .leftside-rightside-wrapper .rightside .js-content {
display: none;
}
}
@media screen and (max-width:1022px) {
.leftside .circle-profile-holder {
display: none;
}
.leftside-rightside-wrapper .leftside {
display: none;
}
.skills-section .leftside-rightside-wrapper .rightside {
width: 95%;
display: flex;
flex-direction: column;
padding: 10px;
justify-content: flex-start;
}
}
@media screen and (max-width: 768px) {
.leftside-rightside-wrapper {
flex-direction: column;
/* Stack elements vertically */
align-items: center;
/* Center items horizontally within the parent container */
}
.leftside,
.rightside {
width: 100%;
/* Take full width on small screens */
max-width: none;
/* Reset max-width */
}
.rightside .inform-wrapper {
margin: 10px 0;
/* Adjust margin as needed */
}
/* Adjust font size and padding for smaller screens */
.rightside .inform-wrapper .top p {
font-size: 18px;
}
.rightside .inform-wrapper .top .progress-bar {
height: 10px;
margin: 5px 0;
}
.rightside .inform-wrapper .bottom p {
font-size: 12px;
padding: 5px;
}
}<div class="skills-section">
<div class="title">
<p>My Skills</p>
</div>
<div class="leftside-rightside-wrapper">
<div class="leftside">
<div class="circle-profile-holder">
<img src="https://cdn.pixabay.com/photo/2023/08/27/00/08/cycling-8215968_640.jpg" alt="">
<div class="profile">
<div class="img">
<img src="https://cdn.pixabay.com/photo/2023/08/27/08/20/hiking-8216486_640.jpg" alt="">
</div>
<div class="description">
<p>Siure veritatis eius Nesciunt nobis repudiandae totam enim nulla. Jas stoa ti, I nea dwa fe.</p>
</div>
</div>
</div>
</div>
<div class="rightside">
<div class="html-content inform-wrapper">
<div class="top">
<p>HTML</p>
<div class="progress-bar">
<div class="progress pg-html"></div>
</div>
</div>
<div class="bottom">
<p class="description">
Architecto, adipisci perspiciatis quasi expedita dolorum, iste aperiam ipsa id impedit inventore doloremque quo quae eligendi, quia sapiente obcaecati doloribus deserunt quis.
</p>
</div>
</div>
<div class="css-content inform-wrapper">
<div class="top">
<p>CSS</p>
<div class="progress-bar">
<div class="progress pg-css"></div>
</div>
</div>
<div class="bottom">
<p class="description">
Architecto, adipisci perspiciatis quasi expedita dolorum, iste aperiam ipsa id impedit inventore doloremque quo quae eligendi, quia sapiente obcaecati doloribus deserunt quis.
</p>
</div>
</div>
<div class="js-content inform-wrapper">
<div class="top">
<p>JAVASCRIPT</p>
<div class="progress-bar">
<div class="progress pg-js"></div>
</div>
</div>
<div class="bottom">
<p class="description">
Architecto, adipisci perspiciatis quasi expedita dolorum, iste aperiam ipsa id impedit inventore doloremque quo quae eligendi, quia sapiente obcaecati doloribus deserunt quis.
</p>
</div>
</div>
<div class="php-content inform-wrapper">
<div class="top">
<p>PHP</p>
<div class="progress-bar">
<div class="progress pg-php"></div>
</div>
</div>
<div class="bottom">
<p class="description">
Architecto, adipisci perspiciatis quasi expedita dolorum, iste aperiam ipsa id impedit inventore doloremque quo quae eligendi, quia sapiente obcaecati doloribus deserunt quis.
</p>
</div>
</div>
</div>
</div>
</div>Does anyone know what’s wrong with this code that’s causing my divs to not respond to different screen sizes?
3
Answers
The problem was the skills-section container itself needed flexbox, I removed all padding and margins and updated the padding and margins for the child containers. Here's the result:
Add
box-sizing: border-box;to all CSS rules (for example using the "all" selector as seen below) to include the paddings in allwidthsettings (if you don’t, padding gets added to whatever width, which can result in more than 100% of the screen width and similar):