Jump to content

CSS code: is it possible reduce the size of 'text content' with a specific 'collection'?

Recommended Posts

Hi Team,

Mobile CSS hack request pls 💭: I would like to change a collection of 9 text blocks (within a collection), so they appear side by side on mobile vs. as one column of 9 rows (attachments show desktop vs. mobile views). 

Has anyone been able to create code this for a specific collection, please - also without impacting other collections? My hack below isn't working.

@media only screen and (max-width:640px) { 
#collection-61bf528042424e65709dee0a.user-items-list-simple:not([data-num-columns="1"]!important) {
grid-template-columns: repeat(3,1fr)!important;
grid-gap: 10px!important}
.list-item-content__title{font-size: .8rem!important}
.list-item{padding: .8rem!important}
}

Many thanks 🙂

Lu

Screenshot 2022-05-16 at 3.18.16 pm.png

Screenshot 2022-05-16 at 3.25.09 pm.png

Link to comment
On 5/16/2022 at 9:30 PM, DotcomMarket said:

Hi Team,

Mobile CSS hack request pls 💭: I would like to change a collection of 9 text blocks (within a collection), so they appear side by side on mobile vs. as one column of 9 rows (attachments show desktop vs. mobile views). 

Has anyone been able to create code this for a specific collection, please - also without impacting other collections? My hack below isn't working.

@media only screen and (max-width:640px) { 
#collection-61bf528042424e65709dee0a.user-items-list-simple:not([data-num-columns="1"]!important) {
grid-template-columns: repeat(3,1fr)!important;
grid-gap: 10px!important}
.list-item-content__title{font-size: .8rem!important}
.list-item{padding: .8rem!important}
}

Many thanks 🙂

Lu

Screenshot 2022-05-16 at 3.18.16 pm.png

Screenshot 2022-05-16 at 3.25.09 pm.png

we can check more easily if you share your site with site-wide password

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I managed to add this CSS, for mobile only, which works across the site quite well.

@media only screen and (max-width: 640px) 
{
.user-items-list-item-container {grid-template-columns: 1fr 1fr;}
}

However... Do you have a CSS hack to create CSS for one page, to...

  1. Image 1: Reduce the 9 list content items into 3 x 3 (instead of 2 x 2 + 1), including a font reduction (so it looks neat)
  2. Image 2: Can the header text be reduced to fit to one line?   

Here's the page: https://bit.ly/3yR9gi0.

Many thanks  🙂

Image 1.png

Image 2.png

Link to comment

Use this CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] {
    grid-template-columns: repeat(3,1fr);
}
.user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] * {
    font-size: 14px !important;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

 

Thanks @tuanphan 🤗

I've tried to expand on your lovely CSS - if wanting to vertically + horizontally align the text to the cell, e.g. as per attached image (longer words wrap to a second line, others don't = untidy), do you have better CSS than me, please:

    vertical-align: middle; text-align: center !important; 

Warm regards,
L

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] {
    grid-template-columns: repeat(3,1fr);
}
.user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] * {
    font-size: 12px !important;
    vertical-align: middle; text-align: center !important;
}
}

 

Screenshot_20220524-154530.png

Edited by DotcomMarket
Link to comment
11 hours ago, DotcomMarket said:

 

Thanks @tuanphan 🤗

I've tried to expand on your lovely CSS - if wanting to vertically + horizontally align the text to the cell, e.g. as per attached image (longer words wrap to a second line, others don't = untidy), do you have better CSS than me, please:

    vertical-align: middle; text-align: center !important; 

Warm regards,
L

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] {
    grid-template-columns: repeat(3,1fr);
}
.user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] * {
    font-size: 12px !important;
    vertical-align: middle; text-align: center !important;
}
}

 

Screenshot_20220524-154530.png

To align center vertical, use this attribute

.list-item-content {
    justify-content: center !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.