I have watched the video regarding Breakpoints in WIX ACADEMY but cannot understand how to create an extra Breakpoint for the landscape view on an iPad 12.9 Pro. Currently all breakpoints are set to the default values. I would really appreciate your help to get this extra breakpoint added. Currently due to the size of the iPad the content is displaying as if it is being viewed on the laptop screen but it is not behaving correctly relating to it’s responsiveness. I need it to display as a mobile device. Thanks so much in advance for your reply.
3 Likes
Hey @edenr1 ,
In EditorX breakpoints are simply setting a range of screen widths. Breakpoints values are not necessarily related to specific devices or specific views such as landscape.
I would try to make a design that would fit all devices (and views) in a specific width.
Hi @edenr1 ,
The iPad Pro’s landscape view’s width exceeds 1000 pixels. The default breakpoint for computers on Editor X is 1001 & Up. This is why, when you edit your website for computers, it appears the same for the iPad Pro. So in order to edit the site for the iPad Pro, you need to change the current computer breakpoint (i.e. 1001 & Up) to at least 1500 pixels.
To add a custom breakpoint for a landscape view on an iPad Pro and to edit the site for this particular breakpoint, follow these steps:
-
Visit www.viewportsizer.com from the browser on your iPad Pro. Make sure it is in Landscape mode (since you want to edit the Landscape view).
-
Note the width that is displayed (the height dosen’t matter).
If the width exceeds 1000 pixels (which I’m sure it will), follow either Method 1 or Method 2 (Method 2 is a bit easier):
Method 1:
To add a custom breakpoint for a landscape view on an iPad Pro and to edit the site for this particular breakpoint, follow these steps:
-
Go to Editor X from your computer and open the site that you want to edit.
-
From the Customise breakpoints panel, edit the size of the Tablet breakpoint (i.e. 751 - 1000 px) to 751-1500 px .
The breakpoint 751-1500 px will be your breakpoint for the iPad Pro Portrait as well as Landscape mode.
The breakpoint 1501 & Up will be your breakpoint for laptops and desktops.
Now you can edit the site for the iPad Pro breakpoint the way you want. If you want your site to look like your mobile site, you can go to elements and click on Copy from breakpoint.
Note: Any changes that you make to the iPad Pro breakpoint will automatically cascade down to smaller breakpoints.
Method 2:
To display your site in an iPad Pro just like it would appear on a mobile device, follow these steps:
-
Go to Editor X from your computer and open the site that you want to edit.
-
From the Customise breakpoints panel, Delete the Tablet breakpoint (i.e. 751 - 1000 px). Now you should have only two breakpoints, i.e. Mobile and Computer .
-
Edit the width of the Mobile breakpoint from 320 - 750 px to 320 - 1500 px .
The breakpoint 320 - 1500 px will be your breakpoint for the iPad Pro Portrait and Landscape mode as well as all screen sizes smaller than that (i.e. all mobile phones).
The breakpoint 1501 & Up will be your breakpoint for laptops and desktops.
Now your site should appear just like its mobile version in your iPad Pro. You can always add more breakpoints if needed.
Note : Any laptops or desktops with widths smaller than 1500 pixels will display the mobile version of your site, since the Computer breakpoint is set to 1501 & Up .
I’d recommend Duplicating your site before making any changes to the breakpoints so you always have the original site in case something goes wrong.
Hope this helps! (:
Perfect, thanks for explaining in such a straightforward manner. The viewport sizer website was really useful too. I know I cant design the site for every device but I am keen to design for all my devices and then this will hopefully accommodate most peoples viewing…I really appreciate your help and time Pratham.
Oh I look forward to reading any further updates as suggested in your closing desk.
You’re welcome! I’ve added another method so do check it out. And let me know if this works for you. (:
@pratham Perfect thanks and I now fully understand breakpoints in Editor X. I really appreciate you taking the time to share your expert advice cheers and all the best @edenr1
Thanks for the reply much appreciated @miril