Full screen width for home page

For my home page only, I want to be able to use the full width of the screen without the left and right margins that are applied to the standard screen layouts.  The standard screen layout is find for all the other pages in my application.

How can I use the full screen width for just the home page ?

Cheers, Richard.

Hi Richard,

The width and height you can.change on the theme gird settings:

Regards,

Daniel

Hi Richard,

You can check the Login page's layout to see how it's done there...

@Daniel, the Gutter Width is the space between columns of the Grid, not the width of the page's contents.

Hope this helps!

Jorge Martins wrote:

Hi Richard,

You can check the Login page's layout to see how it's done there...

@Daniel, the Gutter Width is the space between columns of the Grid, not the width of the page's contents.

Hope this helps!

Thanks for the tip Jorge, I'll have a look at that.

Cheers, Richard.

Hi Martin,

I wasn't refering to the gutter width, but to the min and max width. I copied an existing image not seeing it had the focus on the gutter width. I see now why that could cause confusion.

Regards,

Daniel

Richard Pearce wrote:

For my home page only, I want to be able to use the full width of the screen without the left and right margins that are applied to the standard screen layouts.  The standard screen layout is find for all the other pages in my application.

How can I use the full screen width for just the home page ?

Cheers, Richard.

Hi,

You can white following css for page level


.ThemeGrid_Container {

    padding-left: 0%;

  padding-right: 0%;

}





Jorge Martins wrote:

Hi Richard,

You can check the Login page's layout to see how it's done there...

@Daniel, the Gutter Width is the space between columns of the Grid, not the width of the page's contents.

Hope this helps!

Hi Jorge,

I had a closer look at the Login page's layout and it appears to use a different layout web block which doesn't suit my purpose.  I want to use the common layout web block as for my standard screens, but just on this screen increase the width to 100% and without the margins and padding.

Cheers, Richard.

Kavita wrote:

Richard Pearce wrote:

For my home page only, I want to be able to use the full width of the screen without the left and right margins that are applied to the standard screen layouts.  The standard screen layout is find for all the other pages in my application.

How can I use the full screen width for just the home page ?

Cheers, Richard.

Hi,

You can white following css for page level


.ThemeGrid_Container {

    padding-left: 0%;

  padding-right: 0%;

}

Hi Kavita,

That was a great suggestion and I see where you got the idea from, but unfortunately it didn't work.

Cheers, Richard.

Solution

Richard Pearce wrote:

Jorge Martins wrote:

Hi Richard,

You can check the Login page's layout to see how it's done there...

@Daniel, the Gutter Width is the space between columns of the Grid, not the width of the page's contents.

Hope this helps!

Hi Jorge,

I had a closer look at the Login page's layout and it appears to use a different layout web block which doesn't suit my purpose.  I want to use the common layout web block as for my standard screens, but just on this screen increase the width to 100% and without the margins and padding.

Cheers, Richard.

Richard,

then you will need to analyse the common Layout web block and determine which elements are adding said margin. Once that has been determined, define the needed CSS to your specific screen only.

My analysis of an existing Traditional Web app using OutSystems UI Web is that you need to override the values of margin, padding and max-width for the .layout-top .content .ThemeGrid_Container selector. Setting them to initial or inherit will do the trick for you. You can then play around with those values to adjust to your preferences.

.layout-top .content .ThemeGrid_Container {
  margin: initial;
  padding: initial;
  max-width: initial
}

Hope this helps

Solution

Jorge Martins wrote:

Richard,

then you will need to analyse the common Layout web block and determine which elements are adding said margin. Once that has been determined, define the needed CSS to your specific screen only.

My analysis of an existing Traditional Web app using OutSystems UI Web is that you need to override the values of margin, padding and max-width for the .layout-top .content .ThemeGrid_Container selector. Setting them to initial or inherit will do the trick for you. You can then play around with those values to adjust to your preferences.

.layout-top .content .ThemeGrid_Container {
  margin: initial;
  padding: initial;
  max-width: initial
}

Hope this helps

Thank you Jorge, that really helped !

With a bit of adjustment to only reset the left margin, right margin, left padding and right padding to initial so that the footer positioning was not impacted, it worked perfectly.

Cheers, Richard.