I’m a relative novice to web design so my apologies if I’m not using the right terminology to describe my problem. I’m having an issue with the big slider images at the top of the page on mobile/tablet devices. First of all, everything looks fine within the web flow interface and when i preview things…however when I publish and view in landscape mode on a mobile device the bottom gets cut off (please see attached images)
I’m not sure if i understand your problem but, i think the point is that you have issues to vertically center the slide container which contain your title right ?
If so, i think you just miss typed your transform move up (50px instead of 50%).
If you want to vertically center something the css trick is 50% top and transform move up 50% not px.
Also set the slider container to relative so his height will depend on children elements.
Thank you so much for pointing out those tweaks! That definitely got me most of the way there. The only remaining issue appears to be why the web flow interface shows things differently than when I publish the site.
Using the current example (after implementing the changes you mentioned in your last post), I’m curious if there’s a reason why in webflow it shows the whole picture with the text responding one way…and then the published page shows it differently (notice the placement of the text, and now the cropped image)
Great to hear it helps !
Its because you always have to resize vertically when you check the responsivity, mostly on landscape.
You can’t just design and trust what you see. You need to resize sometimes vertically and horizontally to be sure you didn’t forget something.
