iPhone Responsiveness

Design help General
1

Hi

I am loving working in Webflow and keenly learning after breaking free from WordPress.

I have a very simple site that I am adding to a marketing system, however even though the pages look great on all platforms in Webflow, on my actual phone I am having an issue.

I have my name like this Paul Stevenson: +1 702 475 5779

When I go to mobile view it is like this : Paul Stevenson
+1 702 475 5779

Which is correct

However on my actual device it is like this: Paul Stevenson +1
702 475 5779

I cannot work out why the +1 will not drop to the next line!

Any ideas

Thanks so much

Here is my share link https://preview.webflow.com/preview/exitusteam?preview=d314b0de9fdd28fbe909e1e91e70c631

Regards

Paul

2

What kind of phone are you using and with which browser?

3

You can also ad a span around your number give it a class and tell it to display block on the phone view.

1 Like
4

Hi @Davidn

I am using and iPhone 6 Plus and Chrome browser
Is a Span a Div Block?

So separate the name and phone number?

I will try that

Thanks

Paul

5

You can use a div. You can add a span by highlighting the text and clicking the little paint brush that is part of the text editing buttons.

6

Hi @Davidn

I cannot see the little paintbrush anywhere!

Please can you be more specific

Thanks

Paul

7

Here is a screen capture

1920×610 149 KB

8

Thanks @Davidn!

I was not even looking there.

Could you explain how this would work

I ended up just creating 2 columns and putting the text in there.

But I would like to learn the correct way to do it

Thanks again

Paul

9

With your original setup you would highlight your number like I did with the Lorum Ipsum text in the picture I shared. You would then click the little paint brush. This would create a span around your number. You can then create a class for the span.

Once that is done toggle over to your phone view and set the display of the class you created for the span to block. This way when your website is displayed on a phone your whole number will be forced onto its own line, but will keep its inline look for larger screens.

1 Like
10

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