Tab Container CSS - Full Screen Width

[Thais_Fontes]

Hello,

I would like to have my tab container and all components on it (table collection) to be full width.

I have applied the below CSS, but it’s not working.

.tab-container div[class*="wire-container___StyledDiv2-sc-1scc3f6-1"] { 
 max-width: 100vw;
}

[Thais_Fontes]

I was able to do the tab full screen, but then it is now breaking the table

.tab-container, 
.tab-container * {
  box-sizing: border-box !important;
}

.tab-container div
{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

[Eric_Penn]

I’m away from my computer right now, but you could try this CSS. Others might have suggestions too.

div[class*="section-container"] >div {
max-width: 100vw;
}

div[class*="container-padding-md"]  {
max-width: 100vw;
}

div[class*="single-column justify-center"],
div[class*="renderer___StyledDiv6"]{
max-width: 100vw;
}

[Thais_Fontes]

It has not worked for the tab container or the table

[Thais_Fontes]

I found one that works!

/* 1️⃣ Tabs container: edge-to-edge */
.tab-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 2️⃣ Direct child wrappers: edge-to-edge */
.tab-container > div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 3️⃣ The table-container: edge-to-edge */
.table-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 4️⃣ The direct child grid inside the table-container: force it wide */
.table-container > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* DO NOT force display:block: this can break flex layout! */
}

/* 5️⃣ Prevent body horizontal scroll */
body {
  overflow-x: hidden !important;
}

[rayo]

I hate the table scroll bar.. so in many of my apps i use this short css and it works fine

put your table in a container and give the container the class cont-wide

.cont-wide div[class*=“StyledDiv5”][class*=“pages-component-renderer”] {
max-width: 1400px;
}

here is how it looks - it works for custom collections as well.