Jump to content

Adjusting arrows on 'People' carousel on mobile

Recommended Posts

Hi all, I'm pretty new to coding but any help here would be so appreciated!

I've got what I believe you would call a carousel on my client's 7.1 site. It's looking really good. I added it as a section, under the category 'People'. I've added 8 sections which you can slide through people's photos and information using the arrows feature enabled. On desktop, the arrows are to the side. 

However, when I switch the mobile, the arrows go to the bottom and only one person's photo and information shows at a time. This is fine. However, the arrows are so far down. Each person's section of text are different lengths, so the arrows are as far down as the longest chunk of text. It's clunky because the person's photo, text and the navigation arrows don't fit into one phone screen's length, if that makes sense. It looks silly!

Is there a way I can move these arrows to show on the sides, like in the desktop view? Or a way I can ditch them on mobile all together?

I've found CSS codes that supposedly do this, but they aren't working for me. Most of these codes are directed towards summary carousels, or gallery carousels... and I'm not sure if that's what mine is?

Apologies in advance for not providing a site URL - the website isn't live yet.

Link to comment
On 8/18/2021 at 5:14 PM, zojomo_2 said:

Hi all, I'm pretty new to coding but any help here would be so appreciated!

I've got what I believe you would call a carousel on my client's 7.1 site. It's looking really good. I added it as a section, under the category 'People'. I've added 8 sections which you can slide through people's photos and information using the arrows feature enabled. On desktop, the arrows are to the side. 

However, when I switch the mobile, the arrows go to the bottom and only one person's photo and information shows at a time. This is fine. However, the arrows are so far down. Each person's section of text are different lengths, so the arrows are as far down as the longest chunk of text. It's clunky because the person's photo, text and the navigation arrows don't fit into one phone screen's length, if that makes sense. It looks silly!

Is there a way I can move these arrows to show on the sides, like in the desktop view? Or a way I can ditch them on mobile all together?

I've found CSS codes that supposedly do this, but they aren't working for me. Most of these codes are directed towards summary carousels, or gallery carousels... and I'm not sure if that's what mine is?

Apologies in advance for not providing a site URL - the website isn't live yet.

Hi,

Can you share link to page where you added carousel? We can check easier

If your site is trial/private, you can setup password & share url

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
  • 2 months later...
  • 8 months later...

Hello, I have the same problem on my homepage: https://physicsowls.com for: the section entitled 'our courses'.

I've added code to ensure the images in this carousel sit flush by setting the height to 600px. In landscape view on mobile everything is fine but in vertical mode the navigation arrows no longer stay on top of the image (possibly as you only see one image?) Do I simply change the width of an image in mobile view only, or do I need to use specific code to force the arrows to sit on top of the image regardless?

Thanks in advance!

Latoya

Edited by Physicsowls
Link to comment
On 7/23/2022 at 11:04 PM, Physicsowls said:

Hello, I have the same problem on my homepage: https://physicsowls.com for: the section entitled 'our courses'.

I've added code to ensure the images in this carousel sit flush by setting the height to 600px. In landscape view on mobile everything is fine but in vertical mode the navigation arrows no longer stay on top of the image (possibly as you only see one image?) Do I simply change the width of an image in mobile view only, or do I need to use specific code to force the arrows to sit on top of the image regardless?

Thanks in advance!

Latoya

You mean Upcoming Courses? It looks fine to me. Can you take a screenshot on your end?

image.thumb.png.1417fe5e0fbc16dcadc5086034743865.png

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
1 hour ago, tuanphan said:

You mean Upcoming Courses? It looks fine to me. Can you take a screenshot on your end?

image.thumb.png.1417fe5e0fbc16dcadc5086034743865.png

Hi tuanphan, 

This is the vertical mobile view (taken on iPhone SE) which has navigation arrows at the bottom rather than on the image. No problem in desktop/tablet view.

It would also be great if in mobile view the images weren't so large. 

Any way to fix it?

IMG_62BDA1EFE4E3-1.jpeg

Edited by Physicsowls
Link to comment
22 hours ago, Physicsowls said:

Hi tuanphan, 

This is the vertical mobile view (taken on iPhone SE) which has navigation arrows at the bottom rather than on the image. No problem in desktop/tablet view.

It would also be great if in mobile view the images weren't so large. 

Any way to fix it?

IMG_62BDA1EFE4E3-1.jpeg

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .mobile-arrows {
    position: absolute;
    top: 50%;
    z-index: 9999;
    justify-content: space-between !important;
    width: 99%;
}
}

 

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
  • 2 weeks later...
  • 1 year later...
On 7/27/2022 at 1:09 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .mobile-arrows {
    position: absolute;
    top: 50%;
    z-index: 9999;
    justify-content: space-between !important;
    width: 99%;
}
}

 

I tried this on my site www.ryanlongnecker.com and it didn't work. I already have css code in there for a custom cursor so I'm not sure if it is interfering.

Link to comment
On 3/15/2024 at 5:55 AM, RLongnecker said:

I tried this on my site www.ryanlongnecker.com and it didn't work. I already have css code in there for a custom cursor so I'm not sure if it is interfering.

I don't see People Carousel on homepage. Which page are you referring to?

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
18 hours ago, tuanphan said:

I don't see People Carousel on homepage. Which page are you referring to?

Not sure what people carousel you are referring to, but I ended up finding a workaround to make the images smaller, if you'd still like to look at the arrow placement you can see it on mobile here 

https://www.ryanlongnecker.com/brands/princess

the hope was to have the arrows in the vertical center of the image the same as they are in desktop view.

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.