Drop cap works in mobile designer but not on mobile device?

Hey guys,

I need some help. I spend hours trying to figure out how to add a drop cap as the first letter of every blog post, and I finally got it. I was pleased to see how it works on all the various devices, or so I thought. I noticed that the mobile section of the webflow designer was not the same as the published mobile version when you look at it on your phone. The padding is all messed up and the body text is overlaying the drop cap. I was fiddling around with the padding just as an experiment and I did find a way to add enough padding to make it look normal on a mobile device, but then it is distorted in the designer.

Any ideas on how to fix this? Thanks.

Here is how it looks on mobile:

Here is how it looks on the mobile designer:


Read Only Link:
https://preview.webflow.com/preview/patristics?utm_source=patristics&preview=5e0ee83df9bd7a78c31ca0cdc51f2048

I have no idea. But wait, if you share your read only link I promise to dig in and search for solution :slight_smile:

https://preview.webflow.com/preview/patristics?utm_source=patristics&preview=5e0ee83df9bd7a78c31ca0cdc51f2048

More than 20 pages, witch one to dive in?

I mainly only care about this for the “blog post template” where it is in use.

Can you please also share the published link so it can be tested on mobile?

https://patristics.webflow.io/blog/characteristics-of-a-successful-web-developer

Use a pixel value for margin:right as it appears safari (all) does not like the percent value.

I just changed the value to 10px and still nothing.

Interesting. I did it in safari develop mode, made the change, and it was instant. (NO CACHE).

I was just going to make a movie to show you but the published link is throwing a 404.

18 hour work day and now I’m done.

When I adjust the pixel value on the html, it changes the way it looks on the phone but it also changes it for website view as well, so for me its either good on website view and bad on phone, or good on phone and bad on website view.

Actually the issue was present on Safari for OS X as well. You should be able to adjust the CSS by breakpoint if needed.

Sorry I don’t know much about coding. How would I do that?

Try setting width:90px and margin-right:10px

1 Like

It worked! Thank you!

Hey, how were you able to add a drop cap to your article posts? Would be great to hear how you did it