[Support request] Container sections padding and full width sections

[Marcos]

Hi there.
I’m working on the archive.php file in a child theme and can’t get padding applied to sections content (the content padding set in the customizer). I’m getting 0 padding.
I’m adding the markup directly in archive.php wrapping content in two divs like so:

<div class="generate-sections-container">
<div class="grid-container grid-parent generate-sections-inside-container">
CONTENT HERE
</div>
</div>

Inspecting the code of my home page (which uses sections) I saw this is the way GP generates sections, so used the same markup to take advantage of the CSS applied to them.

While on my home page I get the following inline CSS included automatically by GP:

.generate-sections-inside-container {
padding-left: 40px;
padding-right: 40px;
}

On my archive.php I get 0 padding, .generate-sections-inside-container is not included in the inline CSS.

A few days ago I was trying to get a full width section in my archive.php and realised that as the option ‘use sections’ is not active (can’t do that because archive.php is not represented by a page in the WP Admin), GP was not loading the CSS I needed for that, so I manually enqueued the following file in the archive page to get that working:
gp-premium/sections/functions/css/style.min.css

So my questions are:
1- How can I get .generate-sections-inside-container with the padding set in the customizer on my archive.php?
2- Is there a cleaner way to do what I did to get a full width section? i.e. is there a way to get sections functionality on templates as you can for pages created in the WP admin?

Cheers!
Marcos

[Marcos]

oops, sorry I didn’t wrap the HTML markup in ‘code’ tags:

<div class="generate-sections-container">
<div class="grid-container grid-parent generate-sections-inside-container">
CONTENT HERE
</div>
</div>

[David]

Looks like you found the solution 🙂 Let me know if not

[Marcos]

Hi David.
No, I just ment that I forgot to wrap the HTML in my first comment in ‘code’ tags.
Thanks.

[David]

So just to be clear your archive page will have the standard container width but you want a full width section within that? If so where would the full width section sit and are you able to provide a link to that page?

[Marcos]

As I said in my first comment I got the full-width section working.
This is what I did:

if( is_archive() ) {
            wp_enqueue_style('generate-sections-styles', site_url() . '/wp-content/plugins/gp-premium/sections/functions/css/style.min.css');
        }

Regarding this matter I was just asking if there is a better way to get sections CSS included in archive.php.
I’ve seen in the GP files that this CSS is conditionally included only if it detects that sections are being used (i.e. checked ‘Use Sections’ metabox on a specific page in the WP admin). But how do you get to load this CSS in archive.php? archive.php has no related page in the admin where I can check ‘Use Sections’…

Apart from this, my problem is that I’m not getting the container padding (set in customizer) in archive.php. Why is the following CSS included automatically in my home page but not in archive.php?

.generate-sections-inside-container {
padding-left: 40px;
padding-right: 40px;
}

Sorry, can’t provide a link.

Thanks.

[Tom]

Hi there,

Adding Sections to archives won’t work, and forcing its markup on archives is likely over-complicating things a bit.

What if you just did this?:

.archive .site.container {
    max-width: 100%;
}

Let me know 🙂

[Marcos]

Hi Tom.
Thanks for your reply. I’ll try what you suggest for the full width section. I already got that working but this seems cleaner.

What about not getting padding (set in the customizer) in the container on the archive page?
Any ideas about that?

As I mentioned, this CSS is included automatically by GP in my home page but not in my archives:

.generate-sections-inside-container {
padding-left: 40px;
padding-right: 40px;
}

Cheers

[Tom]

My solution above will use the padding set in the Customizer.

That CSS will only be included if Sections are enabled on the page, which isn’t possible in archives.

[Marcos]

I added the CSS you suggested but still no padding.

Could it have anything to do with the fact that I’m wrapping content in two divs with section classes?:

<div class="generate-sections-container">
<div class="grid-container grid-parent generate-sections-inside-container">
</div>
</div>

I now understand that this is useless as the sections CSS is not being loaded on archive pages…

Which would be the correct HTML markup to manually create “section-like” blocks of content in archive pages?

I have a test online now. If I paste a link here will it be visible to everyone or just admins?

Thanks

[David]

Hi there,

you can edit your original post in the topic and use the Site URL field for privacy.

[Marcos]

Thanks David, edited the post and included the URL.
Any help would be very much appreciated.
Cheers

[Tom]

Is there a specific page I should be looking at? I’m not seeing any areas without padding currently?

Let me know 🙂

[Marcos]

Hi, for example the first section of text (just beneath the header) on the page I left in the URL has no padding. If you shrink the browser width, you’ll see how the text that begins with “¿Quieres viajar… ” has no padding, its completely against the left and right of the viewport.

The same goes for any of the other sections on the page.

Thanks

[Tom]

That’s just because you’re using Sections markup on a page that doesn’t support Sections, which means the built in CSS isn’t printing.

You can add some custom CSS like this:

.archive .generate-sections-inside-container {
    padding-left: 40px;
    padding-right: 40px;
}

[Author]

Posts