Hi,
We are using the pro theme with a lot of our sites, one thing we have found is that it is not responsive to an iPad Pro’s dimensions more specifically the 11inch model.
On all other devices as far as we are aware the site looks fine.
Is this a common problem with the pro theme? Or is this something that is coming out in a new update to add a viewing option for this device?
I have attached the website in secured notes.
Many thanks
Kyle
Hi Kyle,
Thank you for writing in, I have check your site and I don’t see any responsive issue specifically on large breakpoints (1200px - 980px), please clarify and provide screenshot of the issue.
Cheers!
Hi,
As you can see on the iPad Pro 11inch vertical view the website is completely thrown off.
The website looks fine in all viewing options within the editor and other devices it is just this device.
Many thanks
Kyle
Hello Kyle,
You have a 2/3 + 1/3 column layout setup. You have enabled the flexbox option so that the columns will have the same height. In desktop screens, you have a perfect circle. The problem is that as the screen goes smaller the height of the column will increase. Thus, making your perfect circle becomes an oblong shape column. Your layout design is not possible in smaller screen. You have to take into account the width of the screen and the resulting height. As the column becomes narrowing, the height will become longer. It is best that your column setup in smaller screens will collapse into a one column layout to avoid the oblong shape overlay of your column background video.
Hope this makes sense.
Hi,
I fully understand using the flexbox layout and how to make it appear consistent across the devices.
My point is the breakpoints in PRO don’t appear to be respecting the size of an iPad pro 11inch - as in the editor across devices the site looks perfect.
You can see how the navbar is 2 rows of text when it should be just 1 - again in the editor across devices it is consistent.
I have attached login credentials in the secured note so you can take a look in the editor to see what I mean.
Many thanks
Kyle
Hello @j300bac,
I see what you mean.
You have several bars that will display or hidden in different screen sizes. The bar showing is assigned to display in medium screen size which is between 768 pixels and 979 pixels. Please take into account that the bar’s flexbox layout will try to squeeze the space to accommodate the 4 containers. And then since there is not enough space for the menu items, the labels now becomes two rows.
To lear more about the different screen sizes for the different break points, please check out this documentation:
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
