Archived topic
How to make image full width on home page
7 replies · Started by Bella on February 22, 2023
Hello therem
I'm trying to add an image to the top of my homepage (a new page I've made that I'll use as my homepage) that expands the full width of the screen. I've changed 'Container' to be 'full width' and 'inner container' to be full width' but it won't budge.
What am I missing? huge thanks in advance
Image to show what I mean: https://imgur.com/a/WBgQlJz
Hi Bella,
If you want to make a section full width, you'll need to make the entire page's content container full width first.
You can find the option at layout metabox in the page editor's right sidebar:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it
Thank you Ying - that worked! How can I keep the container blocks below (with 3 grids/blog posts in them) at the original width (i.e. not full width)? I can't seem to fix this with padding (it just makes the feature images really small)
Hi there,
use a GB Container Block to divide your full width page into sections.
If using GB 1.7, when you add a Container Block to the top level of the page, it gives you the option in its toolbar to insert a Inner Container, which will be centred and have a max-width already set.
Hi David,
Sorry I'm not sure I understand - am I supposed to add the top image (with the corgi) into an 'inner container'? What max-width should I use?
https://www.linkpicture.com/q/Screenshot-2023-02-27-17.14.27-Display-2.png
It sounds like you are using GB 1.6.
In that case, you can set both the outer and inner containers to full width to show the full-width image.
Then you can add another container below, set full width for the outer container and contain for the inner container, then add the Query loop block inside of it.
For more info about container block: https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-standalone-block
Hi Ying,
I've followed your instructions but when I add a new container and try to make it full width, these are the only options I have under the layout tab? https://www.linkpicture.com/view.php?img=LPic63fe1e5c9984c1533071148
oh, it's the GB 1.7's UI, then containers are full width by default unless you've entered a value for max-width.
You can add the image inside the container, and set the image width to 100%, if the image file itself is wide enough, it will go full width.
Note: you don't need an inner container for the image layout.
