Jump to content

Custom CSS list-item-content_text-wrapper can't get title and desc. to be responsive

Recommended Posts

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:


Code is: 

@media only screen and(min-width:640px){ .list-item-content {      
  transition: all 1s;   
  .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 {
  .preFade {
    padding: 1vw;

I've targed the following classes: 





Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.