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).
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
You realize this is a new property and is not fully supported, especially in the smaller devices which responsive layouts are intended to serve. :-/ Seems like you would be better off using percents which can be fine-tuned with decimal values.
This is probably a test page using the vw units, so changing to percents would defeat it’s purpose. A more flexible layout stragegy should work, though. Use vw’s on fonts and percents on the other items (boxes and images).
I’ve never used vw, so I can’t offer a better suggestion, yet
That link doesn’t seem to be working. Do you have a working link we can see?
I’m assuming your problem is something to do with the fact that you have made elements fit exactly across the width and when the measurements are rounded up or down (as they will need to be) then you may end up with elements too big to fit along the width so one will move down. This could happen at every odd pixel window size in some browsers (as used to happen with older versions of IE when percentages were used). Although in my short tests I didn’t see this issue occuring with the vw unit.
It is generally better not to make everything just fit with specific widths but to allow breathing room where possible (such as not floating the last element so a width isn’t needed).
Of course as I can’t see your site then none of the above may be relevant
A more flexible layout stragegy should work, though. Use vw’s on fonts and percents on the other items (boxes and images).
This is indeed a better way to organize page layout. Better than using vw exclusively since it comes out to be less buggy.
That link doesn’t seem to be working.
Maybe you’ve reached out the server during some kind of a very brief downtime period. The link works fine on my side.
I’m assuming your problem is something to do with the fact that you have made elements fit exactly across the width and when the measurements are rounded up or down (as they will need to be) then you may end up with elements too big to fir along the width so one will move down. This could happen at every odd pixel window size in some browsers (as used to happen with older versions of IE when percentages were used). Although in my short tests I didn’t see this issue occuring with the vh unit.
It is generally better not to make everything just fit with specific widths but to allow breathing room where possible (such as not floating the last element so a width isn’t needed).
Yes! I guess this is the case. Breathing room is essential for the responsive design based on viewport width not to break down on resize.
A more flexible layout stragegy should work, though. Use vw’s on fonts and percents on the other items (boxes and images).