Resizing on hover

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.



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

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

Ah! You can use Elements Cloud to share projects, details on that here.

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.

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.

1 Like

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.

1 Like

Yup, it’s on the list :+1:

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.

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