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

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

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

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

Thanks @bangank36 - just launched at https://www.thecentreforhealth.co.uk/. Thank you 🙂

Which page are you referring to? No buttons on homepage

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  🙂

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;
}}

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;
}
}

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;
}
}

 

To align center vertical, use this attribute

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

Legend, thanks @tuanphan