Streaming live at 10am (PST)

Problems with Slider and responsiveness


#1

Hello Everyone,

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)

Any ideas on why this is happening and how to adjust?


Here is my public share link: https://preview.webflow.com/preview/leepson-bounds-entertainment?preview=5dd92d01afe4f7eadb50d208f78a3bf2]
(how to access public share link)


#2

Hey there,

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.

Hope is helps :slight_smile:


#3

About the image, you know right.. :slight_smile:
If you want 100% height slider, background cover image will me cropped on a landscape picture like this


#4

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)

Webflow Interface - Landscape Mode

**Screenshot of the published page on my iPhone - Landscape **


#5

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.


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.