I need to wrap the text in my CSS file so that when it is viewed on a phone the text doesn't overlap (see screenshot below). I thought it would be as simple as adding overflow-wrap: break-word; and changing the height in .skills .progress .skill in but I've tried a number of combinations and can't get it to work. Any help would be appreciated.
HTML File - this is a Django project which calls the variables name and score from a model
# Skills
.skills .content h3 {
font-weight: 700;
font-size: 32px;
color: #37517e;
font-family: "Poppins", sans-serif;
}
.skills .content ul {
list-style: none;
padding: 0;
}
.skills .content ul li {
padding-bottom: 10px;
}
.skills .content ul i {
font-size: 20px;
padding-right: 4px;
color: #47b2e4;
}
.skills .content p:last-child {
margin-bottom: 0;
}
.skills .progress {
height: 50px;
display: block;
background: none;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0 0 6px 0;
width: 50vw;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #37517e;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: #e8edf5;
width: 100vw;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
background-color: #4668a2;
}
#skills {
display: flex;
}
<section id="skills" >
<div >
<div >
<span >{{Product.name}}  <i >{{Product.score}}%</i></span>
<div >
<div role="progressbar" aria-valuenow="{{Product.score}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</section>
CodePudding user response:
Have you tried using @media (max-width: 650px) {}
that should do the trick.
CodePudding user response:
It's hard to determine the exact root of the issue without seeing an accurate live version. However, I would try adding a display: flex;
on the parent #skills
and make your progress bar width 100vw
# Skills
.skills .content h3 {
font-weight: 700;
font-size: 32px;
color: #37517e;
font-family: "Poppins", sans-serif;
}
.skills .content ul {
list-style: none;
padding: 0;
}
.skills .content ul li {
padding-bottom: 10px;
}
.skills .content ul i {
font-size: 20px;
padding-right: 4px;
color: #47b2e4;
}
.skills .content p:last-child {
margin-bottom: 0;
}
.skills .progress {
height: 50px;
display: block;
background: none;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0 0 6px 0;
width: 50vw;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #37517e;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: #e8edf5;
width: 100vw;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
background-color: #4668a2;
}
#skills {
display: flex;
}
<section id="skills" >
<div >
<div >
<span >{{Product.name}}  <i >Social Media Marketing 100%</i></span>
<div >
<div role="progressbar" aria-valuenow="{{Product.score}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</section>