# Resizing on hover

**URL:** <https://forums.realmacsoftware.com/t/resizing-on-hover/46267>\
**Category:** Elements\
**Created:** [February 15, 2025, 2:20am UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267 "2025-02-15T02:20:12Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 15, 2025, 2:20am UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/1 "2025-02-15T02:20:12Z")

</div>

Hi I tried to get an background color for the entire page. And the only Idea I came up with to put a container (default size) into another container (screen height).

Once I did that I got a weird effect:

Its resizing on hovering of the container. I made some screenshots.

 ![Child_Hover_Editor](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/d/ade0a96b5c8b7b0377b68a70864c4a43a7a01852.png)  
 ![Child_Outside](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/f/df1e4bcdffe1fb65f2764fae263777014f77c8fa.png)  
 ![Parent](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/8/3837251c1b50ea9f42b06dd4525e4741b5322f8d.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [February 15, 2025, 1:54pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/2 "2025-02-15T13:54:59Z")

</div>

It’s probably just an incorrect setting on a component, can you share your project and we’ll fix it up for you?

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 15, 2025, 2:54pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/3 "2025-02-15T14:54:03Z")

</div>

How would I share this? Just curious. Send you a zip File?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [February 15, 2025, 4:40pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/4 "2025-02-15T16:40:00Z")

</div>

Ah! You can use Elements Cloud to share projects, [details on that here](https://docs.realmacsoftware.com/elements-docs/elements-cloud/account-sign-up).

We plan to add a setting to set the background colour of a page, but for now just set the container bg colour and as you fill the page with content it will cover the browser window (hope that makes sense).

Here’s how I’d set it up, [open the project in Elements](elementsapp://downloadDocument/DV6flXmZE3pk).

btw. You could set the bg colour in the Template code (but you’ll only see it on export). Let me know if you want to know how to do that.

 ![CleanShot 2025-02-15 at 4 .38.30@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/f/8f0070cd7c2ee65f4067804455dbb9475a4892d4.jpeg)

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 15, 2025, 4:43pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/5 "2025-02-15T16:43:21Z")

</div>

Hi Dan,  
send you the project already by email. But yeah will keep the cloud stuff in mind. Awesome to add this to a “setting” should be also “dark” / “light” changeable. Regarding the background I can do that over the template.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [February 15, 2025, 9:10pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/6 "2025-02-15T21:10:28Z")

</div>

Yup, it’s on the list 👍

---

<div class="post-metadata">

**Author:** ![Beblebroks](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Beblebroks](https://forums.realmacsoftware.com/u/Beblebroks)\
**Post date:** [February 16, 2025, 2:14pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/7 "2025-02-16T14:14:17Z")

</div>

You can add the tailwind class to the body (e.g. `class="bg-brand-500"`). Be aware that if you do not use that background color anywhere in your page it won’t be exported. As a workarround until Realmac will provide the option you can just add a small hidden element that contains that bg-color. Then it will show up.

In case someone is looking into this thread.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [February 17, 2025, 3:36pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/8 "2025-02-17T15:36:21Z")

</div>

ah, yes and @logrunner just posted about this very thing!

> [@PHP Code Dynamic Tailwind Classes Heads-Up!](https://forums.realmacsoftware.com/t/php-code-dynamic-tailwind-classes-heads-up/46302/2):
>
> You’re 100% correct! Elements builds Tailwind CSS on the fly, so we only output the classes in use on the page. I should bookmark your post or add it to the Element Docs as this is bound to come up again in the future blush Nice work!

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [March 17, 2025, 3:42pm UTC](https://forums.realmacsoftware.com/t/resizing-on-hover/46267/9 "2025-03-17T15:42:35Z")

</div>

> [@Beblebroks](#):
>
> You can add the tailwind class to the body (e.g. `class="bg-brand-500"`).

I have a statement:

```auto
<body class="<?= $body_class ?> p-4">

```

How do I achieve that?
