First post here in the forum. 🙂
I've been working on a simple list to add some fun to the items (min-width:640px desktop only) - with rotate, disolve and such, to give some pizzaz. What I can't seem to do is to get the containing div that hold the title and description to be responsive in the same way as the list-item media image.
When I resize the viewport, the container for title and description shrinks at a greater rate than the list-item media image until it's only 0 pixels wide - which distributes the entire text down to a über-tall list of letters. I want to lock the font-size to the size of the media image if possible, but can't using CSS style names - or I can't 'see' the class properties that I need to target for width and padding etc.
page is:
https://www.emedical-technology.com/products-services
Code is:
@media only screen and(min-width:640px){ .list-item-content {
transform:rotateY(180deg);
transition: all 1s;
margin-top:-100%;
padding-bottom:30%!important;
padding:7rem;
opacity:0;
}
.list-item:hover .list-item-content { transition: all 1s; transform:rotateY(0deg);
opacity:1; }
.list-item-media img{ transform:rotateY(0deg); transition: all 1s;}
.list-item:hover .list-item-media img{ transition: all 1s; transform:rotateY(180deg);
opacity:0 }
.list-item:hover .list-item-media{ transition: all 1s; transform:rotateY(180deg); background-color: #CBDCF7;
}
.list-item-content__description p {
padding:1rem;
}
.preFade {
padding: 1vw;
}
}
I've targed the following classes:
.list-item-content__text-wrapper
.list-item-content__description
.list-item-media-inner.preSlide.slideIn
Thanks!
