Hi, I have a full width container with a table collection inside. I’d like the table to be the full width of the screen. Any help is greatly appreciated. Thank you
If you have access to CSS this may help
div[class*="section-container"] >div {
max-width: 100vw;
}
div[class*="container-padding-md"] {
max-width: 100vw;
}
Thank you. These are the settings I currently have but the containers are not full width.
Thank you. This works but the containers below are also full width. Is it possible I can just get the container holding the table to be full width?
You need to give a class name to the container to isolate it.
At least for me this doesn’t change the width of containers on the page. It brings them back to the default width.
Is the Content Width: Large setting in the appearance tab supposed to be full width?
You should turn off the “use compiled CSS” button and turn on preview.
For width you can use width: 100%.
Thank you. This works for all other containers except for the containers that hold tables. I only need the table container widths adjusted.
Can you provide a screenshot of the left panel of your component so I don’t confuse what you mean. Have you named your container class “the-wide-container”?
I applied the class name to the surrounding containers to test and it works on those containers that don’t contain a table.
The function of the class name is to limit the application of custom CSS to only the components you desire. Do not apply it to all containers if you don’t intend to.
Could you show what your table looks like? Is there any column width configuration that is causing your table width to become fixed?
Ok, now it works. I deleted the old container and created a new one. For whatever reason putting the table in the new container worked correctly.
Thank you for your patience and your assistance. This looks good.