- This topic has 9 replies, 4 voices, and was last updated 3 years, 6 months ago by
.
-
Posts
-
Why is it not possible to set the page container to 100% width ?
The suggestion below seems counter intuitive!
”
Container WidthYou can adjust the width of your overall site container inside Appearance > Customize > Layout > Container.
You can use the slider to adjust the width in pixels, or directly input your number into the field.
You can set it to a percentage using CSS, however I typically recommend choosing a really high pixel value like 2000 if you’re looking for a 100% width website. Since GeneratePress is responsive, it will be 100% wide on most screens at that width.
“Customer Support
Hi there,
We can use this CSS:
body .grid-container { max-width: 100%; }Adding CSS: https://docs.generatepress.com/article/adding-css/
But keep in mind that this method is not common as the site would look pretty weird is someone is using a 60″ TV to view your site.
Hi Leo,
Thanks for your quick reply and solution.
I don’t see how it would look any more weird on a 60″ tv than on my 27″ monitor, 4k is 4k regardless and a fixed pixel value on a 60″ screen is going to seem a lot larger no matter what you set it to because the pixel pitch is higher.
My intention is to use a pagebuilder (wpbakery/visual composer) and specify containers with percentage borders and margins. I’m not sure how they two will interact to it seemed logical to set the base theme to 100% width and then adjust everything else on top.
Customer Support
Hi there,
If you’re going to use a pagebuilder to create all of the page content then use the Page Builder Container meta box:
https://docs.generatepress.com/article/page-builder-container/
The layout element mentioned in the article will allow you to set it across the site using Display Rules.
You can set the page to
full widthwhich will also strip the theme padding.
You can then set your container widths and padding in the pagebuilder.Good Mornin,
I am having the same problems.I’ve done the Simple CSS Method & have looked for the page container meta box, both did not fix my problem.
I am using GPP and my website is customgrowngreenhouse.com
Unrelated issue,
How do you embed a Google Map easily? I saw on a different forum that I could use an iframe of google maps that I want to embed in a block. I tried the code, embed url and paragraph all with no luck.
The only way I have “successfully” embeded is from leftover elementor link and going in the code editor, and manually enter it but it also acts funky so I would like to know the real way for upcoming pages.
Thanks for the support
Hi there,
the best method for setting full page containers is the method i provide here:
https://generatepress.com/forums/topic/100-width-container/#post-1407373
Then build your pages with the GenerateBlocks plugin:
You can then use the GB Container Block to split your page into full width sections. Each Container can have a separate background, separate inner container width ( to stop content from scaling beyond a certain width on really large screens ) and padding.
For Google Maps – google requires an API Key to generate a map embed now.
This document provides the how to and links for creating your embed codes:https://developers.google.com/maps/documentation/embed/map-generator#create-project
The API maps info worked great, thank you.
I don’t know why the 100% width container is giving me a problem on this site, maybe because it was previously an elementor site but I have tried making it full width both ways (on page layout & appearance -> elements -> layout -> full width -> on whole site -> save)
All it does, is remove the padding from the left hand side of the site. Only this site has given me problems, my other GP site is acting normal so I am stumped. The right hand side of the content is still cut off about half way on my normal sized laptop.
Here is an attachment of my problem area. https://ibb.co/6BSzHt2
Aah you have the Right Sidebar enabled.
You can disable that Globally in Customizer > Layout > Sidebars.Or in the editor of a specific page under the Layout meta box.
Solved. You’re the best! Have a great one.
You’re welcome
- You must be logged in to reply to this topic.