Full-width block in a fixed width site

[flavi]

Hello,

In the Themes section of my current app, it is set to Fixed width, which is what I want 99% of the time.
I have some specific list table blocks that I would like to make full-width because I have several columns and want to create more horizonal space for the users to view as many columns as possible.

Would love to know if there is some sort of custom code I could use to make a certain block full-width while keeping everything else fixed

[Maria]

Hi @flavi, Matthieu’s custom code will help to adjust the width of certain blocks based on your preference

How to have more control over block sizing on the page

Hi! Me again! Let’s make it more simple. Forget the resizing (transform scale = bye bye) and just play with the width (play with “1000px” only). Change #list1 by the right block id. The modals shouldn’t be affected. I disabled those changes on mobile. Also it should be easier to maintain, some of the selectors I gave you may disappear in the next weeks (specifically all looking like ‘.cssxxxx’ related to action buttons or any button) <style> #list1 { width: 1000px; margin: 0 auto; } @…

[flavi]

@maria

I have put this code in my page header but cannot seem to get it any wider that what the block is already set as. I can make it small by reducing '1000’px parameter, but if I increase it it doesn’t get wider.

As seen in the photo below, this is the max width I can set the table, but I would like to get it wider (like how the black bottom part of the footer stretches across the entire webpage

[aar0n]

It’s great that this custom code option exists, but is Softr planning something that is easier to set up? It’s not much to ask for blocks to be 50/50 or 33/33/33 width, etc. Pretty standard CSS i think.

[matthieu_chateau]

Hi!
Thank you @Maria for the mention. Though the needed code is a bit different.

The code you need to allow full width on a specific block, while having a theme set to fixed width, is this one:

<style>
#table1 .container {
  max-width: none;
}

</style>

If you have multiple blocks that need to be set with a full width (here the example is 2 blocks but you can understand the logic):

<style>
#table1 .container,
#list2 .container {
  max-width: none;
}

</style>

You just need to change table1 and list2 by your block IDs. Code to be inserted in the header custom code of the page settings.

[flavi]

@matthieu_chateau

<style>
#table1 .container {
  max-width: none;
}

</style>

This is exactly what I was looking for! Thank you!! Really appreciate your help

[ob95]

How you achieved this table?

[flavi]

@matthieu_chateau

<style>
#table1 .container,
#list2 .container {
  max-width: none;
}

</style>

Put this in the Header Code of your page, and change the table1/list2 with your blocks

[Henri]

Hello Matthieu,
i tryed this on the new TABS and i can’t make it work, can you help me please

[matthieu_chateau]

Hi Henri,

It appears this is not possible for now. Also a lot of selectors will be standardized by Softr, better not doing this now.