# expanded code section overlap a little bit of next section

**URL:** <https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579>\
**Category:** Feedback\
**Created:** [February 5, 2021, 3:47pm UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579 "2021-02-05T15:47:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![andywang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/andywang/32/4329_2.png) [@andywang](https://talk.observablehq.com/u/andywang)\
**Post date:** [February 5, 2021, 3:47pm UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/1 "2021-02-05T15:47:37Z")

</div>

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.

> **[JavaScript Data Wrangling](https://observablehq.com/@ypwangreg/javascript-data-wrangling#aggregating_data)**
>
> Everything you never wanted to know about working with data in JavaScript... If you want to visualize data on the web, you need to be able to interact with your data using JavaScript. While some amount of data preparation can be done in other...

 ![expanded code section overlap a little bit of next section](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/6263fe0fd86a6329788fc4d09e8279947a5cf60e.png)

Thanks,  
Andy

---

<div class="post-metadata">

**Author:** ![andywang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/andywang/32/4329_2.png) [@andywang](https://talk.observablehq.com/u/andywang)\
**Post date:** [February 5, 2021, 3:58pm UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/2 "2021-02-05T15:58:18Z")

</div>

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.

 ![happened.even.before.and.gradually.accumulated.into.larger.and.larger.offset](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/f/fafce9804eb7def3996c4a462be6bbdd4aa9b38a.png)

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [February 5, 2021, 4:07pm UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/3 "2021-02-05T16:07:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andywang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/andywang/32/4329_2.png) [@andywang](https://talk.observablehq.com/u/andywang)\
**Post date:** [February 5, 2021, 4:08pm UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/4 "2021-02-05T16:08:11Z")

</div>

Yes. Windows 10. Thanks for the quick reply 🙂

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [February 5, 2021, 5:45pm UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/5 "2021-02-05T17:45:12Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![andywang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/andywang/32/4329_2.png) [@andywang](https://talk.observablehq.com/u/andywang)\
**Post date:** [February 6, 2021, 12:08am UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/6 "2021-02-06T00:08:38Z")

</div>

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](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/ab5d720faa2bcc54c21448a8e5a8ba2434b48e48.png)

---

<div class="post-metadata">

**Author:** ![andywang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/andywang/32/4329_2.png) [@andywang](https://talk.observablehq.com/u/andywang)\
**Post date:** [February 6, 2021, 12:22am UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/7 "2021-02-06T00:22:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [February 6, 2021, 12:52am UTC](https://talk.observablehq.com/t/expanded-code-section-overlap-a-little-bit-of-next-section/4579/8 "2021-02-06T00:52:18Z")

</div>

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**
