expanded code section overlap a little bit of next section

Hi All,

Long time d3 beginner and new to Observable. Great Tool/Website for DV!

I noticed that sometime I had this issue and I don’t know how to get around with it. It might be my browser environment but I tried Chrome build 88 and Chrome Canary build 90 and they are all look the same.

The link is below and the snapshot is provided.

Thanks,
Andy

Note: it seems that it happen earlier and then gradually accumulated into larger and larger margin and finally will overlap the next section. See below for earlier exhibit.

Oh no! We will try and reproduce it. You are using Windows 10, I assume?

Yes. Windows 10. Thanks for the quick reply :slight_smile:

Andy,
Our suspicion is that this is due to zooming. Can you check your zoom level in your browser? It seems like, on Windows Chrome, zooming to, say, 150%, causes this. Can you check if that is the case for you?
This doesn’t seem to happen on Mac (Chrome, Safari) or Windows Edge browsers…

1 Like

Thanks Cobus! Confirmed that it is caused by zooming, exactly 150%. Changed back to 100% or even 125% solved the issue. It seems that I had to live with it unless I switched to a larger screen.

scale-and-layout

Just simple note that by fixing the issue (with the above ‘Recommended’ settings by windows 10), one could using Ctrl+’+" to set the Chrome zooming to > 110%. So that it will compensate the margin thus fixes the issue.

Thanks for the Cobus for the help. Observable really makes the life much easier.

Excellent. Glad this worked. I think that between Windows’s scaling and the browser’s zooming, the pixels don’t know where to go! I actually think that the Edge browser in Windows works better with the windows display scaling, so I suspect that browser would not suffer from the same problem, if you ever feel you need to go BIG

1 Like