Having problem with Responnsive Design & Typography Style

[Ben_Hapka]

HI Webflow support,

Problem 1 - Responsive Design

I am having problem with my published website. It looks great on my desktop and the responsive design looks great through desktop, tablet and mobile(See Video). But when I see my published site on my iPhone it’s not responsive(See Photo).

Problem 2 - Typography issue

Also the typography in tablet and Mobile is little weird. The paragraph indents in a weird place. Making the rag not right. "Creative in milwaukee” Part (not sure how to fix that. I try changing the percent of the content and the container and the padding inside and nothing works.

Website Address (Go Daddy URL)
www.benhapka.com

Public Page (Look over container structure)
https://preview.webflow.com/preview/bhapka?preview=adc74a7be31e5f9a7f3a148cbe911617

Problem - 1 View
Viewed on Physical iPhone 6 (Not Responsive)

Problem 2 - Typography issue

Viewed on Google Resizer.

Resizer - Material Design

The Creative “in milwaukee” should not be breaking to a new line, both mobile and Tablet

Thanks for all the help. Looking forward hearing from you soon.

---

Again Here is my public share link: https://preview.webflow.com/preview/bhapka?preview=adc74a7be31e5f9a7f3a148cbe911617

[DharmaNode (Michael)]

Hi @Ben_Hapka sorry for the delayed response

After a long look at your project i figured i’d test it on my own phone and it seems to be working fine on Android 5.1.1 using Chrome:

I have no clue why it won’t work on an Iphone. Maybe it has something to do with the custom code. Did you try removing the custom code and see if that changed anything?

Michael

[Ben_Hapka]

Hi @DharmaNode,

I try that and it didn’t do anything. Super weird right? Any suggestion for with the typography(Line Break)

This is how it looks like without the custom code on Chrome Iphone Mobile and Safari.

[coolest_vlad (Vlad Radchenko)]

@Ben_Hapka So I think from what I can see is that you are trying to make the text be responsive and automatically grow or decrease in size depending on the screen size of the device. If so this can easily be done in Webflow natively without any custom code by using VH/VW/EM measurements. I don’t know if this is exactly what you are looking for as the solution to the problem but I suggest you try it out. Hope this helps.

[Ben_Hapka]

So I figure it out and now its working great!

[coolest_vlad (Vlad Radchenko)]

@Ben_Hapka That’s good to hear.