Archived topic
How To Make Homepage Full Width Image And Not Text
5 replies · Started by John on March 9, 2023
Hello,
I've been trying to figure out how to make an image full-width while letting the text stay centered for my homepage. Basically, I'm trying to create this homepage: https://boracaycompass.com/ where as you can see the image is full width while the text below is centered in the middle. I've tried to follow the other support threads that mention to make the Content Container Full Width, but this causes everything to be full-width including the text.
When I select the specific container (where my image is the background), it doesn't seem to allow me to only make that specific container full width. In Layout for the block, there is nothing to make it full width. If I click on the sizing area, I have to specify a specific number for the width instead of letting it be full width.
Thanks in advance for help.
Hi John,
To make any section in a static page to be full width, you need to make the entire page's content container to be full width. It can be done via 2 settings.
1. For a single static page:
Use the layout metabox in the page editor.
2. For multi pages or blog/archive pages:
Use the layout element. Make sure the elements module is activated at appearance> GeneratePress.
Once the page's content container is set to full width, you can use GB container block to control the layout.
Hi Ying,
Thank you for the help on this! I was able to figure out to by adding another container and setting the padding for it. Just two more quick questions relating to my making my homepage look like that link.
1. What is the correct way to add text to the image container so that the text is centered from top to bottom? I know I can center from left to right by simply aligning the text to the center. But I don't see an option to align the text to the middle from top to bottom.
2. Does GenerateBlocks or GeneratePress have a design where you can make those posts lists? I don't see one that offers simply using a post grid with a Featured Image and the title.
Thanks,
John
1. Are you using a background image for the container block?
If so, you can use either option below:
a) add the same amount of top/bottom padding for the container.
b) set the container to display:flex, align-items: center: https://docs.generateblocks.com/article/layout-options-overview/#display
2. Yes, you can use a query loop block of GenerateBlocks: https://docs.generateblocks.com/article/query-loop-overview/
Perfect, that answered everything. Thank you!
Glad to hear that :)
