Hi everyone, I've been diligently working on my portfolio website and I'm thrilled that it appears responsive on mobile devices, my Macbook Air, and both of my desktop monitors. However, I've encountered an issue on my Lenovo laptop where the columns appear shorter and the text exceeds the column length. Do you think adding another media query would solve this problem or is there something specific in my CSS that needs adjusting? Take a look at this screenshot illustrating the issue
Below is the code snippet; the media query specifies a min-width of 700px:
#skills .container {
max-width: 1200px;
text-align: center;
background: #fff;
border-radius: 20px;
height: 70vh;
box-shadow: 0px 10px 30px rgba(57,56, 61, 0.205);
display: flex;
/* -webkit-box-flex: 1;
flex-grow: 1; */
}
#skills .container .column {
display: block;
padding-left: 15px;
padding-right: 15px;
flex-basis: 33%;
border-bottom: 0px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
/* margin-left: 10px;
margin-right: 10px; */
}
#skills .container .column:last-child {
border-right: none;
border-bottom: none;
}
#skills .container .column #skills-icon{
margin: 20px 20px;
font-size: 35px;
color: #6666ff;
}
#skills .container .card p {
font-family: 'Ubuntu';
}