Change List Item Content Width Mobile Only

Site URL: https://seadragon-onion-dg7x.squarespace.com/

Is it possible to change the content width of a list section on mobile only?

On the courses page, I have the content width set to 38% but it's way too narrow on mobile. I'd like it around 96% on mobile.

Thanks!

On 9/10/2021 at 5:43 AM, Kaiyo said:

Site URL: https://seadragon-onion-dg7x.squarespace.com/

Is it possible to change the content width of a list section on mobile only?

On the courses page, I have the content width set to 38% but it's way too narrow on mobile. I'd like it around 96% on mobile.

Thanks!

Hi,

Your site is private. Can you setup passowrd & share url?

On 9/12/2021 at 3:43 AM, tuanphan said:

Hi,

Your site is private. Can you setup passowrd & share url?

I think it's on public now. URL is Kaiyo Sonics | 1:1 & Group DJ Lessons | Online | In Person

I ended up just duplicating the section and hiding one on mobile/one on desktop and changing the content width on mobile. If there's a better way to achieve that though it might be handy

On 9/22/2021 at 6:20 AM, Kaiyo said:

I think it's on public now. URL is Kaiyo Sonics | 1:1 & Group DJ Lessons | Online | In Person

I ended up just duplicating the section and hiding one on mobile/one on desktop and changing the content width on mobile. If there's a better way to achieve that though it might be handy

Hi,

use this CSS

/* List section width on mobile */
@media screen and (max-width:767px) {
.list-item-content__description {
    width: 100% !important;
    max-width: 100% !important;
}
}

5 hours ago, tuanphan said:

Hi,

use this CSS

/* List section width on mobile */
@media screen and (max-width:767px) {
.list-item-content__description {
    width: 100% !important;
    max-width: 100% !important;
}
}

 

perfect, thank you!