[Resolved] Full witdth sections

[Jos]

Hello,

I’m trying to recreate this lay-out: http://www.jamesclear.com on my website http://www.josnierop.nl

As you can see on the homepage I’m having some trouble with creating full width containers with a certain background colour. The white container on my homepage is too small.

As a ‘quick fix’ I changed the complete background colour of the website to #f9f8f4, but since that looks a bit off on blog posts, I will change it back to white. I just can’t get it done, creating some full width containers with a certain background colour… I can use borders to make it look like jamesclear.com, would be great.

With the articles…
This is what I’m trying to create: https://jamesclear.com/goals-systems
And this is what it looks like now: https://www.josnierop.nl/brief-god/ (the spacing is off because I’m trying to create those full width sections with a certain background colour, as specified above.

Hope you can help, give me some advice 🙂

Jos

[David]

Hi there,

lets deal with the homepage first.

Edit the Page and set the Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

Now you have a Full Width page with 0 padding.
Split your page into sections using the GenerateBlocks Container Block.
Set the Layout > Inner Container width to desired width.
Set the Container -> Spacing –> Padding for Desktop and Mobile.

let us know how you get on, and after we can look at the single post

[Jos]

Thanks for the quick reply 🙂

I tried the things you suggested but the content container stays narrow.

http://www.josnierop.nl ->

In an ideal situation I would use the background colour #f9f8f4 behind the title “Krachtbronnen voor een goed leven”, similar to https://jamesclear.com/, but I don’t think that’s possible (without changing the background colour of the whole website).

If not, i’m trying to create a full width ‘banner’ in the colour #f9f8f4 behind the text “Homepage is in aanbouw” (see https://jamesclear.com/). I tried your suggestions but it doesn’t come out right.

By the way, when I look at a single blog post (https://www.josnierop.nl/brief-god/), the spacing is much better (full width). That’s what I’m trying to do on the homepage. To be even more specific: https://jamesclear.com/ uses borders on his homepage, I’m also trying to get those borders all the way to the end of the screen, but I just don’t know how :/

Any ideas?

Thanks,

Jos

[David]

In Customizer > General, can you make sure the Structure is set to Flexbox ?

[Jos]

It wasn’t, but it is now. That didn’t change anything on the homepage yet.

I do think there is some code in the extra CSS (customizer) that narrows the container, but I don’t really know what that could be (I’m not a developer).

To me, https://jamesclear.com/ looks really simple, just some boxes with borders, I really hope we can replicate that 🙂 I know how to make containers and borders so it should work.

Thanks,

Jos (I provided log-in details in my previous posts)

[David]

Ok, i logged in to take a look.

1. In Customizer > Extra CSS remove this CSS rule:

.entry-content,
.entry-summary,
#comments {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

That will allow the pages to span the width of the screen.

2. I see Bootstrap is being loaded by marqmedia cursus plugin – do you know what that is for ?
As bootstrap being loaded on top of the theme may cause some extra hurdles to get over.

[Jos]

Again thanks for the quick reply on the weekend.

1. I removed the CSS you mentioned and now the background colour behind “Homepage is in aanbouw” (www.josnierop.nl) ALMOST goes to the edge of the page. What should we change to actually touch the edge of the website? I set everything to zero.

2. A web development company created an online course for me, on this page: https://www.josnierop.nl/product/online-cursus/
They used their own plugins. Is this something I have to address / fix?

P.S. The upcoming 2 weeks I will read all the GP and GB documentation, to prevent asking too many questions.

[Leo]

1. Bootstrap (as David mentioned in #2) is causing the issue:
https://www.screencast.com/t/FarjM2EdQa

2. Not from our end unfortunately. The plugins need to make sure that Bootstrap is loaded for the plugin content only.

[Jos]

Thanks. I’ll contact them!

[Leo]

No problem 🙂

[Author]

Posts