Breakpoint on mobile portrait assumes mobile landscape design

Design help General
1

Hi everyone,

When I view my website on Google Pixel 8 mobile portrait, the design assumes mobile landscape.

I checked the viewport size of Google Pixel 8 here Google Pixel 8: viewport, screen size, CSS pixel ratio, cross-browser compatibility and it is below the breakpoint guide for mobile portrait so I don’t understand what is happening.

I had the same issue on a Samsung mobile landscape that it was assuming the tablet design.

Is there anything I can do to address this?

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

1 Like
2

Hi there,

Different devices have varying viewport sizes, and it’s important to test how your site responds across these different screens. Here’s how you can test your site for specific devices:

Using Chrome DevTools:

  1. Open Chrome DevTools (press F12 or right-click and select “Inspect”)
  2. Click the Device Toggle button (mobile/tablet icon) or press Ctrl+Shift+M
  3. Select from preset devices or enter custom dimensions

For precise testing in Webflow:

  1. Click the Canvas settings icon in the top toolbar
  2. Enter your desired viewport width in pixels
  3. Preview your design at that specific breakpoint

These tools will help you ensure your site looks great across all devices, including Pixel 8 and Samsung devices.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like