100% width container?

Ask the community
, , ,
1

Question:
How can I create a container as an overlay that is 100% width

Product:
Wix Studio

What are you trying to achieve:
I have a section that has a dynamic background from CMS and I don’t have the ability to for example add a color overlay so I added a container on top to do that.
The container appears to be fullwidth in the preview but it’s only 100% of the editing size. the overlay is only stretching up to that point and then is no longer 100% width.

What have you already tried:
I tried to add in the code to have the container at 100% width but it’s not doing anything different.

Additional information:
I also tried this:
$w.onReady(function () {
// Define the overlay box
const overlay = $w(“#overlayBox”);
// Set the overlay style dynamically
overlay.style.position = “fixed”;
overlay.style.top = “0”;
overlay.style.left = “0”;
overlay.style.width = “100%”;
overlay.style.height = “100%”;
});
Not doing anything.

2

Hi, user2553 !!

You’ll need to set the container size to “100vw.” Select the target container, then click on “…” (Advanced Settings) within the “Size” section in the right-hand panel. Toggle the switch to ON to enable more detailed size settings.

Next, click on the unit for the W value (it’s likely set to % or px), and change it to vw. Finally, set the W value to 100 to complete the “100vw” configuration. :wink: :raised_hands: :raised_hands: