Full Width Webpage

Full Width Webpage

I am about to start creating a public website using Outsystems and I want to replicate a homepage like the attached. i.e.
1. A Google map across the full width of the page
2. A selection box on top of the map...

I would really like to replicate the way this example looks - is this possible?
If so does anyone have any pointers on layout etc...
If you want to keep the fixed width of the outsystems columns in the rest of the page (as in the example you sent) you have to set your google map with absolute position, with a fixed margin from left and right. Put it in a container with a style GoogleFullWidth (for instance), and add the css
.GoogleFullWidth {
    position: absolute;
    height: 200px;

This will stick the container to the left and right of the window, with fixed height.
Be sure that all containers inside this main container will have width:100% in their styles. (I don't really know which containers have the Google Maps widget).

When you do this, your GoogleFullWidth container will not push the following containers down (because it has position:absolute), so you have to add manually another container, with no specific style except a fixed height, equal to your google container height (in my example, height: 200px).

Let me know if this helped.

Best regards,
Pedro Vieira
Hi Pedro,
I think I followed your advice, but I can't seem to get an option box to sit over the map.
I've attached my simple OML... I've used a static image rather than google maps for simpler testing.
Any ideas?

Hi, your GoogleFullWidth2 container should be only to make sure the rest of the page moves down after the image. Your image height is actually bigger than 200px, so I would change it's height to 200px, or the container height to the height of the image. Also the image width should be 100% so it scales when you change your window size.

.GoogleFullWidth img {
    height: 200px;
    width: 100%;

To put contents on top of the image put another container inside GoogleFullWidth after the image, and set margin-top: -100px (for instance). If you would like the contents to be transparent, or something, take a look at


Good drawings ;-)
Thanks Pedro,
I'm not getting the result..i.e. I can't see my box on top of the image.
So I tried to call the image in CSS instead, but still no luck?

Put the CardGreen div inside the GoogleFullWidthDiv. I send you the oml in attachment.
best regards,
Pedro Vieira
Looks good in Service Studio... however when published the image isn't displayed... ?
There is one slash / that shoun't be in the image path:
should be
This is because the image path is actually inside the espace path, so full path would be

Great... exactly what I was looking to achieve!! Thank you so much :-)

I spoke too soon... the above works whilst the image is called in the CSS.

If I remove the CSS image and insert an image into the container or if I insert the GoogleMap weblock the overlayed menu shifts down... any ideas anyone?

Try putting margin-top:-100px in the menu container. Remember that the container must be inside the same container that contains the image or the google map.
I think i've followed what you said... it worked on an image, but when I put the GoogleMap weblock in it doesn't work.?
OML attached with the 3 versions - GoogleMaps looses the menu... looks like it's underneath the map and being hidden...
On MenuGreen class, put

Although I don't really know why this works... :-|
It does work... you are a star! :-)