Mobile Optimization Issues: Centering a Slider

Design help General
1

Hi Everyone!

I am having trouble getting my slider to fit centered on mobile view. When I view the published version of the site on my IPhone 6:

  1. On landscape view, the slides and “book now” button doesn’t want to appear. I can see a little bit of the bottom half of the book now button underneath the “Business or Social?” column

Photo: https://s24.postimg.org/imwnvpyfp/IMG_3301.png

  1. On portrait view, the slides and button are down to the bottom.

Photo 1: https://s24.postimg.org/gwdmu8gwl/IMG_3302.png
Photo 2: https://s24.postimg.org/4vs6ti9hx/IMG_3303.png

Any and all help is greatly appreciated!

Thank you!

Here is my public share link: https://preview.webflow.com/preview/acutahead?preview=174dc2c0c5ece3133786edc6538fd875
(how to access public share link)

2

Nice looking site! To help your landscape and portrait view, you have a couple of options:

  1. If you want it to display the image to the full VH like you have it, you may want to lessen the buffer (position push down and padding around the div above your text and the padding above the button) you have in those views. Set it to a lower acceptable amount to display it in the area.
    Lower this number in phone landscape and portrait view

  2. Move the slider div to a 100% instead of 100VH in the phone landscape and portrait view and also lessen the slider main rotation and change the position to relative. The main image won’t always fill the entire screen, but it will contain the slider section to not allow it to push past the slider div. The slider div will grow to the size of the relative elements (slider and button) and if bigger than window, will scroll past instead of push past like what is occurring.

3

Thank you so much!! One last thing…

The buttons I have throughout the site – when I would hover them it used to transition pretty smoothly but now it’s harsh. I have them set at 400, all properties, but sometime during my editing it stopped responding.

Any advice?

4

Ditch the background images on the button and set the background color and you are good to go:

Remove:

Set background color:

5

Life saver!!!

I thought that was the last thing… but I do have another issue I came across.

On the expanded tablet view, my columns “Business or Social” / “30 years of experience” / “Is it your first time?” don’t align with the photos. I was only aware of this because I was checking the published site on an IPad. I have been playing around with it for a while now and I cannot figure out for the life of me why it won’t align. I thought maybe it was because of the sizing of the photos but I don’t think that is the case…

Also… the first “book now” button is now not clickable… I wonder what I did? How can I get it to click again.

Thank you for all your help!

6

Could you provide a screenshot or your published .io to see the alignment issue you are mentioning?

For your button issue, you need to set your “slider main rotation–>big bold” class to have a z-index of 9999 to move it to the top.

7

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