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.
thanks
Here is my site Read-Only: Webflow - Jayco Recruitment
Hi @Jamie9402
When dealing with smaller screens, try to make elements adapt by setting their width to 100vw (that’s the full viewport width).
Don’t forget to keep an eye on child elements – their width should ideally be flexible and not exceed the width of the viewport.
For certain items, like job cards, consider switching from horizontal layouts to vertical ones. It can make a big difference in how they appear on smaller screens.
Now, for background images, if you’re having trouble getting the perfect fit with the ‘cover’ property, you might want to create a version of the image tailored specifically for mobile. You can hide it on larger breakpoints.
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.
