Container cuts screen!

You see the image. The line where I added another container is a problem. It was all good, but when I went to the real website it hides half of the picture of the sand castle and the title “The Arena” off. Any ideas or thoughts what’s happening and also fix it

Well I mean that the last container is sent to the back of the original container. We need it so it can be even

Please tell me HOW TO DO IT!!!

Try adding some separators in the container with the image.

I tried to add separators but it got even worse when I added it. Any solutions?

No. The hero container doesn’t automatically fit the image, it fills it. If you need the entire image to display, you’ll need to use an image component or upgrade to business and use CSS.

I do not feel like upgrading to business, what if I just like make the text “The Arena” smaller so it can fit, does that solve the problem

Here is what works for me. Create an image in Canva or somewhere that is a transparent png about the proportions that you are looking for. Then add a container with the actual image you want to show, and use “image” as the background. Next, add an image inside of this container that points to the empty png image. That will expand the container image without putting anything unwanted in front of it.

I think that’s fine I can just like downsize the text from the container and show you how it looks like after. Okay

Here’s what I was talking about regarding using an image instead of an image container:


Thanks @Robert_Petitto, that works if your image has a transparent background, but not for my situation where i want a larger photo to bleed to the edges. Each is good for a different need. Hoping the image bleed thing gets fixed with the upcoming evolution of Pages.

I do love the separator trick :heart_eyes: