I have managed to build my website how I’d like it on the desktop view but I am now struggling to make it mobile compatible, the slider on the landing page is not working and the backgrounds aren’t loading and the nav bar is all of of place. I would like some advice on how to fix this.
Also some tips on how to make the fixed background effect work on a mobile or iPad too.
Here is my site Read-Only: Webflow - Jayco Recruitment
Thanks rasheed, for the mobile version of the slider I have created smaller images but they won’t show as the slider is showing to be stacked vertically rather than horizontally so I the second and third slide aren’t visible at all. would you know how tofu this?
@Jamie9402 The second and third are not showing at all because your
.Mask 3 is set to vertical flex which stacks the slides above each other and not side by side, change the flex direction to vertical on mobile and you should see them.
Thank you so much, can you see what is causing the overflow?
I don’t think the overflow is the issue because a slider mask should overflow, the issue I’m seeing is that each slider is not taking the full width but I’m afraid this will need more time to investigate it.
I seem to have fixed the slider issue, Im just struggling with the overflow now
Can you specify exactly what are you facing with overflow, share a screenshot and hopefully I’ll able to trouble shoot.
it’s probably one of the elements of the page, exceeding the width of the page check for fixed widths throughout the page or grids that have two columns or more if any.
Another solution would be wrap the content of the page in a div block and set the overflow setting to hidden.
Optimize slider, adjust CSS for mobile, use media queries, consider parallax.js for mobile fixed backgrounds.