I developed 4 bootstrap cards in 4 different columns. Within each of these cards, I created a new card that contains some type of information.
My problem is that the text comes out of the card when I reduce the screen size (responsive test). What is my problem and how can I solve it?
Thanks !
.cardsZone {
margin-top: 2%;
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
}
.myCards {
background: #E7EAF180 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
height: 100%;
}
.card-deck .card {
margin-left: 0px;
}
.mysmallCcards {
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
margin-top: 20px;
}
.card-header:first-child {
border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
}
.mycardHeader {
background-color: white;
padding: 8px;
}
.imgDash {
width: 40px;
height: 40px;
border-radius: 8px;
}
.brandName {
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 22px;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 0px;
}
.subtitledash {
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
font-weight: bold;
;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 28px;
}
.imgusersDash {
width: 24px;
height: 24px;
transform: matrix(1, 0, 0, 1, 0, 0);
border-radius: 8px;
}
.usrDash {
margin-top: 2px;
width: 24px;
height: 24px;
border-radius: 8px;
line-height: 24px;
text-align: center;
background: #4981C226;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #4981C2;
}
.p1 {
background: #EFF0F2 0% 0% no-repeat padding-box;
border-radius: 4px;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #BCBCCB;
padding: 3px 7px 3px 8px;
text-align: center;
}
.duracaoDash {
background: #D9DAE2 0% 0% no-repeat padding-box;
border-radius: 4px;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
color: #BCBCCB;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 8px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><div class="six" style="height: 75%;"><div class="card-deck cardsZone"><div class="card myCards"><div class="card-body" style="overflow-y: auto; overflow-x:hidden;"><div><div class="card mysmallCcards"><div class="card-header mycardHeader"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"></div><div class="p-2"><span class="brandName card-title card-text">Settings in the world</span><p class="subtitledash card-subtitle card-text">Test Settings</p></div></div></div><div class="card-body"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"></div></div><div class="d-flex"><div class="p-2"><span class="p1">1</span></div><div class="p-2">Flex item</div><div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div></div></div></div></div></div></div><div class="card myCards"><div class="card-body" style="overflow-y: auto;"><div><div class="card mysmallCcards"><div class="card-header mycardHeader"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"></div><div class="p-2"><span class="brandName card-title card-text">Settings in the world</span><p class="subtitledash card-subtitle card-text">Test Settings</p></div></div></div><div class="card-body"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"></div></div><div class="d-flex"><div class="p-2"><span class="p1">1</span></div><div class="p-2">Flex item</div><div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div></div></div></div></div></div></div><div class="card myCards"><div class="card-body" style="overflow-y: auto;"><div><div class="card mysmallCcards"><div class="card-header mycardHeader"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"></div><div class="p-2"><span class="brandName card-title card-text">Settings in the world</span><p class="subtitledash card-subtitle card-text">Test Settings</p></div></div></div><div class="card-body"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"></div></div><div class="d-flex"><div class="p-2"><span class="p1">1</span></div><div class="p-2">Flex item</div><div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div></div></div></div></div></div></div><div class="card myCards"><div class="card-body" style="overflow-y: auto;"><div><div class="card mysmallCcards"><div class="card-header mycardHeader"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"></div><div class="p-2"><span class="brandName card-title card-text">Settings in the world</span><p class="subtitledash card-subtitle card-text">Test Settings</p></div></div></div><div class="card-body"><div class="d-flex"><div class="p-2"><img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"></div></div><div class="d-flex"><div class="p-2"><span class="p1">1</span></div><div class="p-2">Flex item</div><div class="ml-auto p-2"> <span class="duracaoDash">00:00:00</span></div></div></div></div></div></div></div></div></div>Problem
