[Silk UI Web] Unable to change the max-width

[Silk UI Web] Unable to change the max-width

Forge Component
Published on 17 Oct (8 days ago) by OutSystems Labs
45 votes
Published on 17 Oct (8 days ago) by OutSystems Labs

We have a Corporate theme which is build on Silk UI (Lisben Theme)

What do we want to do?
Max size of screen that we use is 1440px but by default silk UI sets max-width to 1080px even in device with higher resolution/size.

How did we implement?

We modified the class
.Website .ThemeGrid_Container {
    max-width: 1440px;

What is the problem?

When we reder the screen we still see max-width:1080px

I debugged more and see that there are two css loaded.

  • basetheme.css - which contains the modified css with max-width:1440px
  • basetheme.extra.css - which has max-width:1080px

Can you clarify how can I modify the basetheme.extra. 

I am not sure how this css is rendered.

Hi Leo,

If I'm not mistaken, that basetheme.extra.css is auto-generated by the platform with what you define on your theme.

Look to your basetheme grid properties and see if you have the Max. Width property defined. See the following image:

Thank you!

Than Worked. Can you also point me to the documentation about rendering of screens & CSS by the platform?

Hi Leo!

Sorry about the delay in the response. I don't think that there is documentation exactly about that topics. You have some videos at the Ousystems channel on Youtube that mention part of the rendering process, but just fragments so probably it will not be that clear.

But if you have some questions, I can try to help you clear your doubts.

Two tings you can already know (or maybe not) regarding the rendering of the pages:

  • Adding CSS our JS to your WB's will add files to download on the <head> of your page. This can decrease the performance of your application. Instead you should try to add this to the Theme or to the Page where the content is being used.

  • Avoid use too many "BaseTheme"s. This will add a CSS @import to the generated file and if you are using a great "train" of themes it will decrease the loading times of your application.

I hope this may be of some help ;)


I would just add the Online Help reference, mentioning the HTML tags that are rendered for each Service Studio screen widget.