-
Hi lovely Generate team,
I’ve been really excited to use the new carousel feature on my latest website build. (https://theretreatreflex-10f610885i.live-website.com)
Everything looks fantastic on desktop but I am having trouble optimising for mobile. I have two carousels:
1.) Reflexology Treatments by concern
This one is a biggie. The idea is that the viewer gets two treatment suggestions per concern. I have reduced the 3 columns on desktop to 1 column, 3 rows on mobile. The remaining problems are:
– excessive padding above and below the carousel that I can’t seem to shake
– i need to change the layout of the mobile specific cards so that they are shorter so that the reader can see the concern and treatment options at the same time. I am thinking a narrow photo on the left of the box, the tag, treatment name and description in a second column beside and the duration, price and book button below and across the two columns. Of course I am open to hearing your thoughts.
– as you click through the carousel, things look even messier. HELP! 🫶2.) Benefits of Reflexology
– I want one card to appear per slide, centre aligned
– there are a couple of ‘ghost slides’ at the end that I can’t make sense of.I have provided login details below. Thank you so much as usual!
-
Hi there,
To have the image on the left and text on the right, you need to wrap the text with a new container.
– I want one card to appear per slide, centre aligned
I don’t think it’s possible based on your structure. As each slider includes the title and 2 cards.
I think the only solution would be hide this section on mobile, and build a new carousel only for mobile.
-
Hi Ying,
Thank you for your quick reply, as always. I think in this case, our wires got crossed a little bit.
I have recorded a short video to show you exactly where I am stuck: https://www.loom.com/share/d329b2611b0842bca13b6bc92570793d
Incredibly grateful for your help. I have spent all day trying to fix this and I am getting nowhere.
-
1. You will not be able to remove the “paddings” you are referring to, nor will I.
The spacing is occupied because the entire carousel is a whole unit, it will occupy the space to accommodate all carousel items, so if there’s one extra long, then the entire carousel will be the same height.
I also suggested creating a new one for mobile only.
2. Can you wrap a container for the text, so I can see what issue you have?
3. For the 2nd carousel, you’ve set Slides per view to 3, so it would show 3 on mobile as well. There is no responsive setting for it currently. I would recommend hide it on non-mobile devices, and create a new one for mobile and set the sliders per view to 1.
-
Hi Ying,
I had already rebuilt both of these carousels for mobile. I am sending a screenshot of my editor list view. The carousels in question are Treatments for Concern MOB and Benefits MOB.
1. I understand this in terms of the padding at the top of the carousel but there’s also a huge space below it that I can’t make sense of. Can you help me get rid of that? And is there a way to remove the spacing at the top for the mobile version? If there is not, we might get away with it, as long as the bottom spacing goes.
2.) I have duplicated one of the cards and moved it to the bottom of the page to try and build it out the way I need it. I am sending a screenshots of what I am trying to achieve and where I am stuck. I can’t even seem to get the basics right on this one. The container holding the image and the wrapped text isn’t full width (although I’ve set it to 100%), so the content that should be below it, sits beside it.
3.) I think you looked at the desktop version of this. I have attached screenshots of my carousel settings for the mobile version, which is set to slides per view 1.
All my screenshots are in this folder: https://drive.google.com/drive/folders/1m7olhJMi36Ob8SXCEWwTeAeHFgZnYtqS?usp=sharing
Thanks so much for your help. I wouldn’t ask if I wasn’t at the en of my tether.
-
1. I do not see a carousel on mobile for the About section. Did you add it?
2&3. You have set a
max-widthfor the carousel items in the mobile benefit section, it conflicts with the calculation of the JS, I’v changed them to 100%, so only 1 item will be shown at a time on mobile, please check.
- You must be logged in to reply to this topic.