Responsive Type Breaks on Resize in Chrome

[turbo]

Greetings!

I am using viewport width (vw) on all elements widths to make them responsive.

But the actual resizing comes somewhat unstable.

Here is how it looks

Top image is how it looks at 1366px viewport width and the bottom is at 766px.

The odd thing is that it returns to normal at 707px and breaks again at 700px and returns to normal at 691px and breaks again at 680px and so on (all numbers are approximate).

Please check the working model example

P.S. is it ok to use vw width exclusively?

[Paulie_D]

P.S. is it ok to use vw width exclusively?

I would say that we’re not quite there yet…depending on what browsers you are intending to support.

As for the re-size issue, it’s not something I would worry about.The only people you re-size browsers are developers.

The casual view doesn’t do that.

As for the ‘breaking’ my guess is that it’s due to sub-pixels but I could be wrong.

[turbo]

Thanks for the reply.

I’ve figured out that it is much better to apply vw only to font size and percentages to grid layout.

It is also essential to give some breathing room for the elements also.

And as Paulie_D said the vw feature is really kind of buggy right now. But imho it still can be used along with percentages and media queries.

[Author]

Posts