[Resolved] Generate blocks grid and container

[Lukasz]

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

[Leo]

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 🙂

[Lukasz]

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?

[Lukasz]

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?

[David]

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.

[Lukasz]

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.

[David]

Can you link us to the site so we can see where that is coming from ?

[Lukasz]

done

[Leo]

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?

[Lukasz]

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.

[David]

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.

[Lukasz]

Hi David,
thanks so much for the solution. It works flawlessly.

[David]

Glad to be of help

[Author]

Posts