[Resolved] Content Layout 'problem'

[thxandbye]

Hey,
after you already gave me excellent support and everything related to that worked fine (looks awesome btw.), unfortunately I came across another problem.

I’d like to use different settings of the ‘Layout’ -> ‘Content Layout’ of different pages.
So for example my ‘Home’ should be ‘One Container’, but I’d like to have other ones at ‘Separate Containers’.

The fundamental problem is that I’d like to use the ‘Sections’ plugin, but if im using it with ‘One Container’ its destroys the look of the page.

I have some pictures for exaple:

This is my ‘Home’ with ‘One Container: (how I’d like it to have)
-> http://i.imgur.com/sOkfNdv.jpg

This is my ‘Home’ with ‘Separate Containers’:
-> http://i.imgur.com/D9YEqHI.jpg

Thats my page with the sections plugin and with ‘One Container’
-> http://i.imgur.com/xsHDP9w.jpg

Thats my page with the sections plugin and with ‘Separate Containers’ (how I’d like it to have)
-> http://i.imgur.com/dCWM2Kq.jpg

Is it possible to ‘fix’ the page with the sections plugin, without touching the other pages?

regards,
Tjark

[Tom]

Hi there,

In the next version of Sections, the top and bottom spacing in the one container while using Sections will be gone.

However, that white background is weird – can you possibly link me to the page so I can look at the code?

Thanks!

[thxandbye]

Hey,
this is the site:
http://shin-sekai.de

I’ve set it to one Container, so you can see the essential problem.

http://shin-sekai.de/impressum/
This is one of the ‘sections’ site.

regards,
Tjark

[Tom]

Ah, found a bug when one container is set.

Try adding this CSS:

.generate-sections-enabled.one-container .container {
	background: transparent;
}

[thxandbye]

Awesome, the white container is gone now.
But it doesn’t fix the offset of the sections.

-> http://shin-sekai.de/team/
-> http://shin-sekai.de/impressum/

The offset seems to be different on both pages. Thats kind of strange?

[thxandbye]

I think i have found the solution to have it look like I’d like it.
But since I’m not familiar with web developing I’m not able to modify it myself.
I just edited the html in Chrome.

If i delete the class ‘site-content’ from
<div id="content" class="site-content">
it aligns perfectly aligns with the header.

And if i delete the class ‘site-main’ from
<main id=”main” class=”site-main” itemprop=”mainContentOfPage” role=”main”>`
it shifts right so the edges also align with the header.

And also there is no more free space, when i resize the browser window. Thats how i wanted it anyway.

Is it reasonable to remove these two classes? Or are there serious downsides to it?
Could you help me to archive both additional changes?

regards,
Tjark

[Tom]

This is another bit of CSS in the next version:

.generate-sections-enabled.one-container .site-content {
	padding: 0;
}

That should do it 🙂

[thxandbye]

Awesome, i just had to add one line, so my settings from the Spacing Add-On also get canceled out on the site with the sections.

My final CSS im using to fix this this for now:

.generate-sections-enabled.one-container .container {
    background: transparent;
}

.generate-sections-enabled.one-container .site-content {
    padding: 0;
}

.generate-sections-enabled.one-container .site-main {
    margin: 0;
}

I hope that helps you for the new version off the plugin.
Excellent work from you, really appreciate your help.

regards,
Tjark

[Tom]

Perfect – this has all been added to the new version of Sections.

Thanks! 🙂

[Author]

Posts