Help with iPad pro Responsive Design

Design help General
1

Hello,

I have a bit of a complex hero layout. I have been able to set it up to be responsive for all major screen sizes. It works but it’s not great. Specifically it looks bad on iPad pro.

Could you have a look at the heros of the homepage, for Insurers for Life Sciences pages and let me know a better way to set up this layout?

Live link: https://www.canceraid.com/

read -only link: Webflow - CancerAid

Thanks so much!
Bec

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hey @rlowe1228

Maybe you can use some custom breakpoints to make it look good on iPad Pro.

Here’s some links:

How Can I Target only an iPad Pro? - fjorge

You need to add your custom css there.

Hope this helps :webflow_heart:

3

Looks like Webflow does not have an @media query for the larger 12.9" screen size which is 1024px in portrait. The editor stops testing at 991px at the iPad breakpoint. Not sure if that’s the iPad you’re having issues with. PiterDimitrov’s link provides the query.

In a previous webinar, Vlad mentions new breakpoints will be implemented. Obvious, since new products emerge all the time.

1 Like
4

Yes! Btw, it’s going to be great if we can add custom breakpoints directly from Webflow!

1 Like
5

Hey Piter, i was wandering where should i insert the custom media queries, on the designer or project settings page?

Thank you.

6

I’m also interested in implementing this media query into my CSS, but am wondering if someone could explain exactly how to do this? Also, what exactly does this achieve? Will it cause the iPad Pro to display the Tablet breakpoint?

Thanks!