Expand page content area

Expand page content area

  

Hi guys,

I am using Chicago as the base theme for my web application. However, the Chicago layout uses the page's display inefficiently as it only uses like half of the page to display content. How can I increase the display area to at least utilise 80% of the page? See image attached.

Regards,


Shupie.


Hi,

Inspect the Respective Element and Increase Width in % accordingly.

If you can share an open link, We'll Check/Inspect on it & let u know.

Cheers

Hi Shupie,


Use this CSS code to make it bigger to overwrite the previous css


.ThemeGrid_Container {
    width: 1280px;
}


Regards,

PP

Pankaj pant wrote:

Hi Shupie,


Use this CSS code to make it bigger to overwrite the previous css


.ThemeGrid_Container {
    width: 1280px;
}


Regards,

PP

Thank you Pankaj. I have applied this CCS code on the eSpace Theme Style Sheet but it doesn't change. Where do I need to put this code?


Regards,


Shupie.


Solution

Hi Shupie,

First, keep this style in page level CSS to check whether it's working on not.

if it is working fine on the page, to make this thing generic throughout the application you need to keep this CSS in your theme CSS usually when we create an application by default on theme get created the same name as the application.

or you can also try with below it's not recommended but sometimes we have to go with !important

.ThemeGrid_Container {
    width: 1280px !important;
}

Regards,

PP


Solution

Pankaj pant wrote:

Hi Shupie,

First, keep this style in page level CSS to check whether it's working on not.

if it is working fine on the page, to make this thing generic throughout the application you need to keep this CSS in your theme CSS usually when we create an application by default on theme get created the same name as the application.

or you can also try with below it's not recommended but sometimes we have to go with !important

.ThemeGrid_Container {
    width: 1280px !important;
}

Regards,

PP


This has worked now with '!important'. 


Thanks so much Pankaj. :-)



don't use i!mportant if it can be avoided, it only screws up your cascade

there are better ways to do that..


Dunno if chicago is a grid-them, but then you can set the min-width in the properties.

Futhermore, if you simply set in your baseTheme the following it should work as well:

html .ThemeGrid_Container {
    width: 1280px;
}


you can check with chrom developer tools why your css is not working or which selector has a higher importance.


J. wrote:

don't use i!mportant if it can be avoided, it only screws up your cascade

there are better ways to do that..


Dunno if chicago is a grid-them, but then you can set the min-width in the properties.

Futhermore, if you simply set in your baseTheme the following it should work as well:

html .ThemeGrid_Container {
    width: 1280px;
}


you can check with chrom developer tools why your css is not working or which selector has a higher importance.


Yes, Chicago has a Grid property and changing the 'Grid Type' to 'Fixed', I was also able to change the 'Column' property from the default 12 to 16.


Regards.



J. wrote:

don't use i!mportant if it can be avoided, it only screws up your cascade

there are better ways to do that..


Dunno if chicago is a grid-them, but then you can set the min-width in the properties.

Futhermore, if you simply set in your baseTheme the following it should work as well:

html .ThemeGrid_Container {
    width: 1280px;
}


you can check with chrom developer tools why your css is not working or which selector has a higher importance.



Agree with you. having a selector class will eliminate the use of ! important.