Skip to Content (Press Enter)
UserImage.jpg
Shupi Katsande
693Views
9Comments
Solved
Expand page content area
Question
Usability

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.



page_content.jpg
0
0
03 Sep 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant
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


See solution in context
0
0
04 Sep 2018
Copy Link
UserImage.jpg
Shupi Katsande

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. :-)



0
0
04 Sep 2018
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

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

0
0
03 Sep 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

Hi Shupie,


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


.ThemeGrid_Container {
    width: 1280px;
}


Regards,

PP

0
0
04 Sep 2018
Copy Link
UserImage.jpg
Shupi Katsande

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.


0
0
04 Sep 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant
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


0
0
04 Sep 2018
Copy Link
UserImage.jpg
Shupi Katsande

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. :-)



0
0
04 Sep 2018
Copy Link
2016-04-21 20-09-55
J.
 
MVP

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.


1
0
04 Sep 2018
Copy Link
UserImage.jpg
Shupi Katsande

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.



0
0
04 Sep 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

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.

0
0
04 Sep 2018
Copy Link
2020-01-14 08-53-08
Richard Jan Postema


You have to remove the max width out of your Theme Grid settings. Just leave it empty here instead of the default 1280.
Only then does the below work

.ThemeGrid_Container {
               max-width:value; 
}


0
0
15 Jan 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.