How can i make text is responsive in a div - html

Question

I have a status bar with chevron shape, each bar has a long text. in big screen all are perfect. but in small screen text break the alignment and shape. I not needed to work on mobile screen but it breaks in small laptop screen also.
My target result show below (with small text my code work fine)
My snippets are below, please advise me.
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 10px;
height: 20px;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>

Answer 1

A few tips that you might consider :
You may adjust the padding to keep text away from edges .
Flex can also be useful to center contents.
Vertical-align can be used on inline boxes
.chevron {
/* flex to align content */
display: inline-flex;
align-items:center;
justify-content:center;
/* end flex update*/
position: relative;
clear: both;
padding: 10px 0 10px 2.5em;/* adjust here side's padding*/
margin:2px 0;/*vertical margins if wrapping ? */
height: 20px;
width: 15%;
vertical-align:middle;
text-align:center;
color: white;
font-size: 12px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>

Answer 2

.content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#media(max-width:768px) {
.content {
flex-flow: wrap;
}
}
.chevron {
width: 100%;
position: relative;
padding: 10px;
height: 20px;
line-height: 20px;
text-align:center;
color: white;
font-size: 12px;
white-space: pre-wrap;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="content">
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
</div>
I hope it's what you're looking for :)

Answer 3

what if you align the elements and in case of the responsive you center it and leave only one per line.
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px 0 8px 27px;
height: 20px;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
vertical-align: top;
line-height: 9px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(40deg, 0deg);
-moz-transform: skew(40deg, 0deg);
-ms-transform: skew(40deg, 0deg);
-o-transform: skew(40deg, 0deg);
transform: skew(40deg, 0deg);
border-top-left-radius: 3px;
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-40deg, 0deg);
-moz-transform: skew(-40deg, 0deg);
-ms-transform: skew(-40deg, 0deg);
-o-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
border-bottom-left-radius: 3px;
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
#media all and (max-width:768px){
.chevron {display: block;margin: 5px auto;padding: 8px 9px 12px 30px;}
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>

Answer 4

.content {
width: calc(100% - 30px);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
#media(max-width:768px) {
.content {
flex-flow: wrap;
}
.chevron {
text-align:end;
}
}
.chevron {
width: 100%;
position: relative;
padding: 10px;
min-height: 20px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px 2px;
}
.chevron span {
width: 100%;
margin-left: 25px;
color: white;
text-align: center;
font-size: 12px;
white-space: pre-wrap;
text-transform: capitalize;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="content">
<div class="chevron"><span>Claim registered</span></div>
<div class="chevron"><span>Awaiting Emails</span> </div>
<div class="chevron"><span>Please Repair; Awaiting repair date </span></div>
<div class="chevron"><span>some lengthiest; status goes</span></div>
<div class="chevron"><span>Invoice Paid</span></div>
</div>
ok friend here is this!

Answer 5

Yes, the styles are not responsive, a fixed height and width. Also use the word-wrap property to break word from overlapping content area ( won't work well if height is fixed ).
See an example:
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 10px;
/* You can change this to fit the height you want */
height: auto;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
word-wrap: break-word;
}
/* Responsive media query */
#media screen and ( min-width: 992px )
{
.chevron {
max-height: 20px;
}
}