Jump to content

How to set up TWO COLUMNS in carousel design in MOBILE VER.

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://adrianrydz.squarespace.com

Hello to everyone.

I would like to set up 2 columns in my carousal design sections with adjacent slides (another option that is lack in mobile).

There is only option to do it for desktop version (so I chose 4 columns that looks good with adjacent slides) but there is no option to do it for mobile version where I would like to have 2 columns with adjacent design.

password... yumichan

 

 

213784014_3944032662361936_6161613824220996742_n.png

218304535_364251905052057_6745061593320133320_n.png

Edited by adrianrydz
adding a missing word
Link to comment
  • Solution

Hi. Try adding to Design > Custom CSS

/* Mobile list carousel */
@media screen and (max-width:767px) {
body.homepage ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(2,1fr) !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

Works perfectly! It is incredible how many people you help here.

There are beautiful two columns in mobile now. Thank you very much! I will be still looking for solution how to add "adjacent slide effect" that reveals the next slide a little bit on the edges in the same way how it happens in desktop version but it is a little detail so don't worry. I don't want to take more of your precious time. Thank you very much! You are amazing!222058397_988515731983144_8875905690829979532_n.thumb.jpg.d678f849883eddd3fe630874855c2f77.jpg

Link to comment
  • 6 months later...
On 7/23/2021 at 12:04 AM, tuanphan said:
/* Mobile list carousel */
@media screen and (max-width:767px) {
body.homepage ul.user-items-list-carousel__slides {
    grid-template-columns: repeat(2,1fr) !important;
}
}

@tuanphan thank you! I though I tried this but apparently I hadn't done it properly. I saw you also gave a solution for code injection in order to make it auto scroll. Is there any workaround for a personal plan or do I need to jump on to the next tier to be able to do it? Thanks! I've been looking at your answers, you are solving everybody's issues!

Link to comment
On 2/7/2022 at 9:11 AM, 1_Caveman_Mashing_Buttons- said:

@tuanphan thank you! I though I tried this but apparently I hadn't done it properly. I saw you also gave a solution for code injection in order to make it auto scroll. Is there any workaround for a personal plan or do I need to jump on to the next tier to be able to do it? Thanks! I've been looking at your answers, you are solving everybody's issues!

This code is CSS. Personal support CSS. Which code in code injection are you referring to?

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

@tuanphan I was trying to get the columns for carousel to autoscroll and I found your answer here:

...but I'm on a personal plan. I haven't learned html or javascript so it's not worth upgrading yet. I was just wondering if it's possible to autoscroll with CSS. Thanks! You have some great answers! I've implemented many of your solutions on my site in the process of learning CSS.

Link to comment
On 2/13/2022 at 3:13 AM, 1_Caveman_Mashing_Buttons- said:

@tuanphan I was trying to get the columns for carousel to autoscroll and I found your answer here:

...but I'm on a personal plan. I haven't learned html or javascript so it's not worth upgrading yet. I was just wondering if it's possible to autoscroll with CSS. Thanks! You have some great answers! I've implemented many of your solutions on my site in the process of learning CSS.

Still possible in Personal Plan. This need a trick. I just sent you a private message

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.