Archived topic
Generate blocks grid and container
12 replies · Started by Lukasz on June 9, 2020
Hi,
How can I implement this view with generate blocks and gp premium?. Should I use container then grid (3 elements). I am glad to hear any tips to implement the view because it looks awesome.
https://ibb.co/JHRxr1v
PS. this is screenshot from site library (demos) as combination generate blocks and generatepress
Hi there,
No need to add a container block. Just add a grid block with 3 columns should work.
The icons are using a headline block with negative top margin.
Let me know if this helps :)
Hi Leo,
thanks for tips, I am learning how to use effective generateblocks. I see a huge potential of that. I am wondering where I can find html icons svg. Is there some official repository?
I am facing with another problem. I defined .entry-content class 775px for blog posts (readability and so on). Moreover I've spotted that the class is above generateblocks elements. In some cases like homepage I would like to have a full control related to generateblocks element. Unfortunately, full width option for container block doesn't work. Can I do something with that?
Hi there,
Theres quite a few online icon libraries - heres a few:
https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started
https://icomoon.io
https://thenounproject.com
If you want to create Full Width Containers then you will need to enable the Full Width option in the Page Builder Container:
https://docs.generatepress.com/article/page-builder-container/
There is a shortcut to this function in the Container Block settings.
Hi David,
I've setup the full width for page builder (homepage in my case) and for container but it doesn't work. On my site is .entry-content class, which has 775px width and overwrite the rule I guess.
Can you link us to the site so we can see where that is coming from ?
done
I'm seeing this CSS added in your child theme:
.entry-content,
.entry-summary,
.entry-header,
.page-title,
.taxonomy-description,
#comments {
max-width: 775px;
margin-left: auto;
margin-right: auto;
}
Does that help?
I was trying put in your solution but unfortunately it doesn't work. The problem is .entry-content class overwrite Page Builder Container full width option in the homepage. I could remove the class but I want to have narrow column text for better readability in case of blog posts on the desktop.
What Leo is say is that YOU HAVE this CSS in your child theme:
https://generatepress.com/forums/topic/generate-blocks-grid-and-container/#post-1324302
If you DELETE that CSS your full width pages will work.
Then you could this CSS:
body:not(.full-width-content) .entry-content,
body:not(.full-width-content) .entry-summary,
body:not(.full-width-content) .entry-header,
body:not(.full-width-content) .page-title,
.taxonomy-description,
body:not(.full-width-content) #comments {
max-width: 775px;
margin-left: auto;
margin-right: auto;
}
This will only target pages that are not set to full width.
Hi David,
thanks so much for the solution. It works flawlessly.
Glad to be of help