▼
Streaming live at 10am (PST)

Centering Text Vertically Within Slider on Mobile

Design help General
#1

I have a slider for testimonials on my site. The text is centered vertically within the section that houses the slider on all platforms except for vertical phone. Everything in my design settings seems right, and it even looks right in the Webflow designer (by “right”, I mean, centered. The padding is off, but on the phone it looks correct.). But when you pull it up on a phone, it’s noticeably closer to the bottom than the top. Any idea why this might be happening?

image1.PNG750×1334 163 KB

Here is my public share link: https://preview.webflow.com/preview/landrys-landscape?preview=cb7535b02cb87348342ca7678fa1b5c9

#2

Hi @Chase.MESH, I have a couple of suggestions:

  1. change the display on the testimonial slider to flex, with justify center and align center:

  1. Remove the 50% top offset and the -50% transform on the testimonials wrapper. remove those offsets for each viewport.

The result should be something like:

Try that and if still an issue, I am happy to check again :slight_smile:

#3

@cyberdave, thanks for the reply! The only problem I’m having with your approach is that once you do it that way, the second slide doesn’t appear. Try sliding through the testimonials to see what I mean.

#4

Hi @Chase.MESH, good point! Good to keep us old guys on our toes :slight_smile:

Try this, remove the display flex from the testimonial slider so that it uses the default styles (click image for full view):

Testimonial_Slide.jpg468×1324 82.6 KB

Next, drag a new div under the testimonial slider, give it a width and height of 100% with display flex, justify center (click image for full view):

Slide_Content.jpg692×580 68.1 KB

Slide_Content.jpg474×1602 103 KB

Next drag the dynamic list into the Slide Content div. Repeat process for second slide.

Then the result looks like:

testi.gif1522×489 948 KB

I hope this helps!

1 Like
#5

@cyberdave, fantastic solution! I’m still running into something, though. Everything looks great in the Webflow designer, but when you look at it on a phone, it’s still off. Weird! Any insight on that?

Update: I think it’s just a Safari issue because it looks right in Chrome on mobile.

#6

@cyberdave, any more thoughts on this issue?

#7

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