Custom code for UX on mobile only.

Hi All,

First post on here and it's a little complicated to explain but I'll do my best.

My website has a section that lists links to certain store categories, along with some icons and text. This looks absolutely fine on desktop screens and I'm happy with how it looks. However, on mobile (as it only shows one link at a time) just looks and feels a bit clunky in my opinion.

I want to explore more custom options on how to make this section look appealing, and one of these ideas was to have each link fill the mobile page, then once scrolled down, have the the next one below fill and snap into place like the one above it, and so on with each link in the section. I have a heading at the top of the section that I'd also like to remain static and visible until all the links have been scrolled to and it goes onto the next section of the page.

So, from the insert above, the heading and subheading at the top I'd like to stay visible whilst scrolling, but more so as opposed to how it is now where it just scrolls through the whole section as normal, I'd like it to have each link fill the screen and snap into place with the heading static.

Above is how it looks currently.

Is this a possibility? Apologies in advance if this makes no sense! Happy to go into more detail if necessary but would be really grateful for any reply!

If it's easier to see the site first-hand, I'll link the info below. (It's the 3rd section on the homepage).

Web: https://entrecrate.com

Password: entredev

Thank you so much!

On 12/26/2023 at 6:37 PM, AlexSan said:

@Conor03,

Sounds like you're looking for snap scrolling on mobile? Something like this: https://bodacious.be/#what_we_do

If so, this forum post may be helpful: Snap Scroll CSS on Index Page

Hope that helps!

 

Fantastic, Thank You!