[Resolved] Generate Blocks “legacy layout system”

[Sue]

I started working on a site just as the new Generate Blocks system was rolled out, and now my site is kind of a hodgepodge of legacy blocks and new ones. I have been trying to straighten it out, but I have run into some difficulties. I want to have colored blocks that span the full page, but on some of the pages, the title gets shunted all the way over to the side. I put a URL in the private info box so you can see what I mean (the title “programme” should not be so far to the left; it should line up with the rest of the content). Having the two kinds of blocks is a little confusing but since I have already finished a bunch of pages in the legacy blocks I don’t really want to mess with them at this point. How can I get the entry-title in the correct place while using the full-width content container?

[David]

Hi there,

see here for adding the Inner Container:

https://docs.generateblocks.com/article/add-inner-container/

[Sue]

Hi Sue,

I can add the inner container with no problem, but I can’t figure out how to make it apply to the entry-title. It’s not in a container, so the entry-title isn’t in a block, right?

[Fernando]

I see. You’ll need a custom code or a Block Element Page Hero to alter that. Reference: https://docs.generatepress.com/article/block-element-page-hero/

Custom code example:

.page h1.entry-title {
    margin-left: 20px;
}

[Sue]

Just as a piece of customer feedback: as a longtime user, I MUCH preferred the legacy layout system. I feel like I’ve spent hours trying to figure out the new system. I’m sure I’ll get the hang of it eventually but when you’re on a deadline, it’s kind of annoying to have a new system roll out when you’re midway through a site!

[Sue]

Also, if I use the custom code, it looks good on desktop but lousy on mobile. I feel like I shouldn’t have to do a custom code or a block element just to make the entry-title line up correctly.

[Fernando]

Thank you for the feedback. Though it may be confusing at first, the new system should be easier and should also allow for more layouts possible. The Container Block also adds less markup by default which should be good performance-wise.

As for the code, can you reshare the link to the site in question so I can take a look at what’s going on?

[Sue]

I put it in the private information box — I’m pretty happy with this page except for the way the page title appears on desktop.

[Fernando]

How do you want it to appear on Desktop? Do you want to move it to the right aligned with the other text?

If so, can you replace the code I provided with this instead?:

.page header.entry-header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

[Sue]

Great, that was a better solution, thanks!

[Fernando]

You’re welcome, Sue!

[Author]

Posts