Jump to content

Standard Squarespace List Item Section Resizes and Stacks Strangely on Smaller Displays

Go to solution Solved by tuanphan,

Recommended Posts

I used a Squarespace standard list item section on my services page (and applied some CSS code to make it clickable).  When I resize the display (for example on an ipad vertical), the cards appear different sizes and the buttons become massive. See attached image. Is there a way to have the cards align (or vertically stack like you would see on a cell phone) for tablet displays? I've looked through so many similar questions, but haven't found a piece of code that works for my site.

On this same page, the accordion appears funny as well for the larger word "contraindications". The text all seems huge. What can I do to get it to fit the column?

Thanks in advance for any help!

Screenshot 2024-01-18 162458.jpg

Link to comment
  • Replies 8
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Thanks for helping me @tuanphan! Is there CSS to keep the cards all the same size? So the top edge and bottom edges of each card aligns so that each card is the same size? I assume the padding around the responsive text in each card determines the card size. Because the text in each card is different, could we create a code that forces each card to expand to match the largest one?

Or perhaps there's a way to control how big the responsive text gets? The buttons on each card also become strangely large to fit the responsive text, is there a way limit how large the text size can get for smaller screens?

Thank you!

Link to comment
On 1/24/2024 at 12:31 AM, leighb said:

Thanks for helping me @tuanphan! Is there CSS to keep the cards all the same size? So the top edge and bottom edges of each card aligns so that each card is the same size? I assume the padding around the responsive text in each card determines the card size. Because the text in each card is different, could we create a code that forces each card to expand to match the largest one?

Or perhaps there's a way to control how big the responsive text gets? The buttons on each card also become strangely large to fit the responsive text, is there a way limit how large the text size can get for smaller screens?

Thank you!

Hi,

That option doesn't work or?

Which page are you referring to? I don't see these cards on homepage

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

https://www.ancientcedarsreiki.ca/healing-services

Unfortunately no, that function center aligns the cards, but on smaller displays they are still different sizes. The buttons and text on the cards is still too big on small screens as well. In the section below, some of the text ("contraindications") in the accordion becomes so large it gets cut off. I'm wondering if there is a way to limit how large the these elements become on smaller displays. Thanks for your advice @tuanphan.

Link to comment
  • Solution
On 1/29/2024 at 12:13 PM, leighb said:

https://www.ancientcedarsreiki.ca/healing-services

Unfortunately no, that function center aligns the cards, but on smaller displays they are still different sizes. The buttons and text on the cards is still too big on small screens as well. In the section below, some of the text ("contraindications") in the accordion becomes so large it gets cut off. I'm wondering if there is a way to limit how large the these elements become on smaller displays. Thanks for your advice @tuanphan.

Add this code to Website > Website Tools > Custom CSS to fix problem on smaller size

@media screen and (min-width:768px) and (max-width:1200px) {
body#collection-65681a5be8529542e809ec4f .list-item-content__text-wrapper {
    min-height: 100px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.