Dear webflow community,
I am designing my first website with webflow (link at bottom of page), and I am running into unforeseen issues with responsiveness on tablet breakpoint. At the bottom of the first viewport you see after opening the page, I have an animation with five cards popping up on page load. On tablet, it’s supposed to be just three cards and on mobile they are deactivated.
Inside of webflow itself, responsiveness works perfectly, which is why I was shocked when I opened the published version on an 11 inch iPad Pro (yes, I’m aware the iPad Pro is not the greatest option since its screen is larger than Webflow’s maximum tablet size of 991px — but it’s the only tablet I’ve got).
Let me explain what issues I ran into:
- The upper caption consists of two different font types (the (almost) white one and the colorized one — so there are two text spans). Set to inline (standard for text), text span 1 was taking up the full first line and a part of the second line, but the iPad only showed line one. On line two, the rest of text span 1 was simply not shown, leaving a blank space before text span 2 (only one word) was shown. This is super weird and I solved it by separating the slogan into more text spans on desktop (not on tablet!) and setting the overall text block to inline-block instead of inline.
While solving this issue, it became clear to me that for some reason, when in landscape mode, the iPad thinks it was a desktop, while reacting to webflow’s tablet settings only when the iPad’s in vertical mode.
- The second issue is where I am running out of solutions and need your help. It pertains to the card animation explained in the beginning. Technically, after what I observed so far, the iPad should show all five cards popping up like on desktop when in landscape mode, and only three cards like on tablet when in vertical mode. However, in reality it shows the tablet animation for both landscape and vertical. This would not be a problem if the animation wasn’t completely distorted, but: while the cards are popping up in the correct order, the second card is popping up directly behind the first one (right in the middle), and the third card pops up way too much on the right. I tried to find the reason for hours — this included taking a look at the animations, changing things from px to vh and vw, inspecting margins and paddings — but I can’t find out what the reason is and how to solve it.
Again, inside the individual breakpoints in Webflow, everything works just fine. I would say ok, let’s just turn off the animation for tablet and leave it on for desktop only, but if I do that, it indeed doesn’t show the distorted cards in vertical tablet mode, but in landscape mode, there are still three cards showing up in this weird way (again making me assume the tablet thinks its a mixture of laptop and tablet and thus confusing the different animations.)
Thank you so much for your time and I highly appreciate any feedback.
Here is my public share link: Webflow - CDR Site