Hi @qkypgy - Welcome to the forums.
Unfortunately there is not currently a way to add additional hard breakpoints to the designer. You can use custom CSS however. You can size the design viewport (width) by grabbing the control tab (right vertical center) and expanding out to 768px (max width on that viewport) to see your design scale. If you are using fluid elements it should be fine. On most sites, phones are going to be a higher percentage of visits than tablets, which is always growing. You can just take that into consideration when you create your design.
Here are some iPhone X breakpoints:
Portrait and Landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) { /* Add your styles */}
iPhone X in landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* Add your styles */}
iPhone X portrait
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { /* Add your styles */ }
I personally find it easier to publish my design and inspect it / write my additional css using the browser devtools. Then incorporating that back into the site via Custom Code.
There are lots of informative topics in these forums. Try searching for “iPhone X”.
Curious about other breakpoints for other Apple devices? Check out this external resource → http://stephen.io/mediaqueries/