Streaming live at 10am (PST)

Tablet breakpoint not working when Developer tools enable with Chrome viewport resizing

Hello,

It seems there is a bug on the tablet breakpoint.

  1. The tablet breakpoint affects anything 991 and below. However, it seems that if you drag the handle to increase the design viewport to anything above 768, the design changes to what’s on the desktop view.

  2. The tablet breakpoint also seems to be inheriting mobile styles for the 768 breakpoint. Anything I apply to the mobile landscape breakpoint is applied to the tablet breakpoint. I can’t override anything in the tablet breakpoint.

Here is a read-only link to the problem: https://preview.webflow.com/preview/test-07c1ae?utm_medium=preview_link&utm_source=designer&utm_content=test-07c1ae&preview=c82b7e5a4c9bed5e3fa2ac084d723cff&mode=preview

The div on the tablet breakpoint should be a purplish color. You can see it on the properties panel. However, it’s green b/c I applied a green color to it on the mobile landscape breakpoint.


1 Like

Looks like it’s only a bug in the designer view. When I publish the site and test the breakpoints, it’s okay.

But still a weird problem to deal with when designing - not being able to see the tablet view unless you manually expand to 769 and above.

Hi @karen,

Here is what I see on desktkop:

and on tablet:

and on mobile landscape:

And on mobile portrait:

It seems the breakpoints are working as expected on my side.

It is often helpful to first try the following steps:

(1) Try to reproduce the error while being logged into Webflow using Incognito mode with browser extensions turned off.

(2) If the problem persists, please take a screenshot of your Browser Error Console and send that to me.

(3) It may be helpful to disable the browser cache so that updated files are always downloaded instead of pulling old content from browser cache.

Let me know if the issue persists, so that I can help to take a look further.

@cyberdave

Hi Dave - thanks for your help. It looks like when I go to developer tools to take a Browser Error Console screenshot, the problem doesn’t exist. Yet, the problem exists when I am in regular Webflow (w/o developer tools/browser error console enabled).

I also tried what you suggested - private mode, extensions turned off, cache cleared, etc. But nothing seemed to address this weird issue.

I have attached screenshots of both. Thanks for your help! For now, I will use Safari.

Hi @Karen thanks, the viewport resizing only works with the built in resizing widget, the developer tools rewrite html on the page, so I probably would not work in chrome with dev tools with the responsive chrome tool enabled.

I will check this further with the team, but it does seem that using developer tools at same time in the designer is affecting to that from your screenshot, I am helping to check further.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.