Global app theme set up with a "full width website" size but you want a fixed width on certain pages?

Custom Coding
, ,
1

For the Softr users who have setup a full width in their app, inside the theme settings, but want a fixed width on certain pages, here is the code you need to insert in the code header, in the page settings:

<style>
.container {
  max-width: 1140px;
  margin: 0 auto;
}
</style>

This can be used, for example, if you have a landing page with a full width but you want a fixed width, more condensed layout, inside the core of your app, as some blocks can look huge if the width of the page is full.

1 Like
2

How could I tweak this to apply only to a certain block? Or have it not affect the header and footer?

3

Hi @Jakob
This is absolutely not the best design pattern to do this. It’s the whole page or nothing.
Increasing the width of one block will only mess with the overall sizing of this one block (as it is ruled by the top, bottom, left and right…) and with the global design of the other blocks.

You can upsize (basically meaning increasing height and width) a block but it will be a horrible design :man_shrugging:. So at the end, it’s really a bad idea and it doesn’t bring anything at the end :disappointed_relieved:

That being said, this can be more logic for headers! => having a full width header and a fixed width for the content

So here is the code, just change #home-header2 and #home_header2 by your header ID (here, I did it for the header of the non loggedin users and the header of the logged in users)

<style>
.container {
  max-width: 1140px;
  margin: 0 auto;
}

#home-header2 .container,
#home_header2 .container {
  max-width: none;
}
</style>

The result will be this one: https://test-play.softr.app/