- This topic has 3 replies, 2 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
Hi
I hope you can help. I’m really struggling to get to grips with the new container layout options. I’ve read and re-read the documentation but still have some issues.I am trying to replicate this
Container = full width
Inner container = contained width (I could set this as desired)
I then placed a background image in the container which would stretch across whatever the device/browser
The GP headline would adjust appropriately to the device
I then could add new-
contained width</uk> containers for the rest of the content.
It all worked perfectly regardless of the device.I am getting confused how to achieve this using the new ‘improved’ container settings (I’ve sort of got it working but now mobile & tablet doesn’t work)
May you point me in the direction of some other documentation or do you have a tutorial yet?
I’m not sure I’m allowed to put up the pages of the test site (you can remove if necessary) but the one that works is vibrantrunners.com (30 mins to design) – all the rest use the new system but https://vibrantrunners.com/about-us/ (12 hours to design and counting!) gives you an idea.
Thanks for your help
Andrew
Customer Support
Hi there,
the first thing is to make sure you have a full width post to begin with.
if you are building a new page then set the Content Container to Full Width:https://docs.generateblocks.com/article/add-inner-container/
This will make the page full width and remove its padding.
Now add a Container Block and in its toolbar click the Insert Inner Container icon:
https://docs.generatepress.com/article/content-container/
This will:
1. Add another container block inside your container.
1.1 set the inner Containers > Sizing -> Max Width to the global width*
1.2 set the inner Containers > Spacing -> Left Margin & Right Margin toautoThis results in the same HTML as the old Container block except you can now edit the two separate containers.
Open the list view to see the nested containers.
With the inner Container selected add some padding.
Then select the outer Container and set the Background* you can change that width to a different value in the editor or change the global width in the GenerateBlocks > Settings.
Hi David
Thanks for your help and apologies for the delay in replying. I’ve followed your instructions and I’m on the right track. I’ll start a new topic if I get stuck.
Once again thanks for your prompt reply.
Regards
Andrew
You’re welcome
- You must be logged in to reply to this topic.
