-
Hello, I am having trouble with the inner container width. The inner container is still full width, even though it is set to global width (1200px).
-
The first thing I noticed is that, across the website, many of the grid containers no longer have a width setting. If one of the default options (25, 33, 50, etc.) was selected, now there is nothing selected. I have been manually fixing these as I come across them. It seems to have applied to grid containers that I manually added to the site, as well as grid containers that were automatically inserted for example within a Generate Blocks query loop.
The page that is currently giving me the most trouble is linked in the private information.
In addition to the first container on the page, please take a look for example at the Phase 2 section. I can’t find anything on the back end that would be limiting the width of the inner container.
-
There are currently two Phase 2 sections. The top one was already there, and I was able to manually fix it so the layour looks correct.
I duplicated the container to create the Phase 2 section beneath it, which as you can see does not display correctly. Strangely, it looks correct on the backend. -
Hi there,
Upon inspection, it seems that your site is still using the legacy container block. You can see this by inspecting any nested container and it has the class
.gb-inside-container. Maybe that explains why it doesn’t inherit the global width set in the customizer.If you’re using the latest version of GenerateBlocks, you can add an inner container via the floating bar setting when selecting any main container block: https://docs.generateblocks.com/article/add-inner-container/
If you want to migrate the legacy container to a new layout system, you can refer to this documentation:
https://docs.generateblocks.com/article/migrating-container-legacy-layout/ -
Hi Alvind, thanks for your help. I did read those articles and have been trying to follow the steps correctly.
On the page in the private information below, I am doing the following:
1. Add a container
2. Click the square icon to add the inner container
3. Make sure the inner container is set to Global Width (1200px) and left and right margins set to auto
4. Add content to inner container
5. Update pageWhen I follow those steps, the inner container is still displaying as full width.
Is it because there are other containers on the page that are using legacy? Do all containers on a given page need to use either legacy or new? -
To see what I am referring to, please visit the url and scroll all the way down. The last container before the footer followed the steps above. The content in the inner container is a paragraph that says “gp”. As you can see it is displaying as full width.
On the backend, it looks correct, as though the inner container is set to 1200px. But on the front end, it displays as full width.
-
The last container is correctly set up and the inner container max-width is 1200px, not full width.
https://app.screencast.com/w9JYOPwUbPmtq -
Hi Ying, thanks for your help. The last container looks correct to me now as well. (I deleted the container as it was just for test purposes.)
Now I am having the same issue with the third container on the page (titled “Phase 2”). Are you able to tell what is going on with it?
-
I just took a look at your site, and the layout seems perfect now. Did you manage to fix it? 😀
-
I ended up removing the containers that were giving me trouble, changing the page content container to default (contained), and adding the content in order without any containers or grids.
I wonder if you could take a look at another page, our “About” page (link in private info).
In the “History” section, the paragraph on the left is set to 66% width. The photo below it is set to 33% width, but is not displaying side by side. I checked for padding or margins that might be affecting this, but I can’t locate anything. Can you see what the issue might be? -
Hi again, here is one more example — our Applications page. All of the containers on this page are set to 33% width, but they are not displaying correctly. (link in private info)
-
Could you try decreasing the width percentage? Maybe try a
50% / 30%ratio. -
Hi Alvind,
Thanks for your help. They are now displaying correctly.
-
No problem, glad to be of help!
- You must be logged in to reply to this topic.