[Resolved] How do I create this container style?

[Robin]

I’m trying to copy the style used by Andre Chaperon on his site here: https://tinylittlebusinesses.com/zettelkasten-method/

As you can see, the H1 title is wider than the body text, and when there is an image in the body, it is also wider than the text. Same goes for one of his quotations.

I’ve tried “Inspecting” the page, but can’t see the settings he uses. I’m pretty certain he uses generatepress.

Any help much appreciated.

I am using the beta-version 1.8 of GP on my site.

TIA

Robin

[Leo]

Hi there,

I think using Header Element would be the easiest:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/header-element-template-tags/
https://docs.generatepress.com/article/page-hero-examples/

Let me know if this helps 🙂

[Robin]

Thanks Leo, I see those links all relate to the header, but how do I…

“…and when there is an image in the body, it is also wider than the text. Same goes for one of his quotations.”

Cheers

Robin

[Leo]

Sorry missed the body images part.

This should help:
https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-728743

David also has an interesting approach here:
https://generatepress.com/forums/topic/different-width-for-images-media-versus-text/#post-735165

[Robin]

Thanks for your help Leo. Much appreciated. I’ll tinker over the weekend.

Robin

[David]

Hi there,

Some alternatives:

If you use the Gutenberg Block editor then most blocks have the align-wide option. This extends the block to the width or the container. To replicate that in the normal editor you can try this CSS:

@media (min-width: 800px) {
    .entry-title, .inside-article h2,  blockquote {
        margin-left: -100px !important;
        margin-right: -100px !important;
    }
}

Note: the negative margins are greater then your Container padding. So on smaller screens they will stretch beyond the width of the screen. The Media query stops this from happening.
If you want them to extend a lot wider then the main content then you would need to increase your container width and the container padding in the Customizer, lets say you made the container 200px wider, and increased your padding left and right by 100px you could increase your neg margins to -200px…. may still need to tweak the @media min-width to stop any breakages.

I have not included images as you have some that are aligned left or they may have a caption. Andre has added a CSS class to his images to apply the code specifically.

[Robin]

Thanks Leo and David. Appreciate it.

[David]

You’re welcome

[Author]

Posts