Label styling for smaller screens

This commit is contained in:
Thomas Smith 2022-10-14 17:58:43 -04:00
parent 7bd6749467
commit 440ec4bc4a

View file

@ -44,7 +44,7 @@ div.card.card-thumbnail{
right: 0;
}
@media only screen and (min-width: 576px) {
@media only screen and (min-width: 992px) {
.card-thumb-label i{
font-size: 1.5vw;
@ -115,6 +115,148 @@ div.card.card-thumbnail{
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.card-thumb-label i{
font-size: 2vw;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 1.116vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 60%;
}
.card-thumb-label h3 {
color: black;
font-size: 2.8vw;
line-height: 2.8vw;
margin: 0px 0px 1vw 0vw;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: 1.5vw;
line-height: 1.5vw;
margin: 0px;
padding: 0px;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: 1px solid #949494;
padding: 1.674vw;
}
.thumbnail-body{
display: flex;
border-radius: 0px !important;
padding: 0vw;
justify-content: space-between;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 1.674vw;
}
.card-text{
font-size: 0.781vw;
float:left;
position: relative;
top:0.502vw;
}
.card-text-container{
float:left;
position: relative;
width:48%;
}
.thumbnail-body-mobile{
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.card-thumb-label i{
font-size: 2.5vw;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 1.116vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 60%;
}
.card-thumb-label h3 {
color: black;
font-size: 3vw;
line-height: 3vw;
margin: 0px 0px 0.5vw 0vw;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: 1.5vw;
line-height: 1.5vw;
margin: 0px;
padding: 0px;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: 1px solid #949494;
padding: 1.674vw;
}
.thumbnail-body{
display: flex;
border-radius: 0px !important;
padding: 0vw;
justify-content: space-between;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 1.674vw;
}
.card-text{
font-size: 0.781vw;
float:left;
position: relative;
top:0.502vw;
}
.card-text-container{
float:left;
position: relative;
width:48%;
}
.thumbnail-body-mobile{
display: none;
}
}
@media only screen and (max-width: 576px) {
.card-thumb-label i{