# HTML element takes over my entire page when embedding Google Trends

**URL:** <https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [January 3, 2025, 7:20pm UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217 "2025-01-03T19:20:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lebom326](https://avatars.discourse-cdn.com/v4/letter/l/2bfe46/32.png) [@lebom326](https://community.weweb.io/u/lebom326)\
**Post date:** [January 3, 2025, 7:20pm UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217/1 "2025-01-03T19:20:00Z")

</div>

Please assist, when I embed the Google trends code into Weweb -

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/415d09bfba0b1a93eb3aeebe30d4aeda60750cd1.png)

The display takes over my screen and all my other elements disappear, including the sidemenu. What am I doing wrong?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/390684fb2c6146a9776a02d0637dc099c9383354.png)

---

<div class="post-metadata">

**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\
**Post date:** [January 6, 2025, 6:38pm UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217/2 "2025-01-06T18:38:22Z")

</div>

Hi @lebom326 👋

Can you try wrapping the HTML with a container div and set its height and width? Like \<div style="width: 100%; max-width: 800px;\>

---

<div class="post-metadata">

**Author:** ![lebom326](https://avatars.discourse-cdn.com/v4/letter/l/2bfe46/32.png) [@lebom326](https://community.weweb.io/u/lebom326)\
**Post date:** [January 7, 2025, 8:35am UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217/3 "2025-01-07T08:35:21Z")

</div>

Hi, thank you for the feedback. I tried wrapping the HTML element in a container div but, there is no use.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4ce7bf9eb287f31a1f2762b208e65b74dae123ee.png)

---

<div class="post-metadata">

**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\
**Post date:** [January 7, 2025, 8:47am UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217/4 "2025-01-07T08:47:27Z")

</div>

sorry I meant wrapping the `<script>` tag with a div in the HTML element directly, not adding a flexbox. Something like:

```html
 <div style="width: 100%; max-width: 800px; height: 400px; position: relative; overflow: hidden;">
    <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/3940_RC01/embed_loader.js"></script>
    <script type="text/javascript">
        trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"seo","geo":"","time":"today 5-y"}]});
    </script>
</div>

```

---

<div class="post-metadata">

**Author:** ![lebom326](https://avatars.discourse-cdn.com/v4/letter/l/2bfe46/32.png) [@lebom326](https://community.weweb.io/u/lebom326)\
**Post date:** [January 7, 2025, 11:01am UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217/5 "2025-01-07T11:01:28Z")

</div>

Thanks, but same results:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/226ae40e2111de080e257a9e432a479036bf39b0.png)

---

<div class="post-metadata">

**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\
**Post date:** [January 7, 2025, 12:26pm UTC](https://community.weweb.io/t/html-element-takes-over-my-entire-page-when-embedding-google-trends/15217/6 "2025-01-07T12:26:16Z")

</div>

Can you try wrapping within an iframe? It works for me

```html
<div style="width: 500px; height: 400px;">
    <iframe 
        style="width: 100%; height: 100%;"
        src="https://trends.google.com/trends/embed/explore/TIMESERIES?
        ...
    </iframe>
</div> 

```