[Resolved] ‘cat-links’ and ‘entry-meta’ outside the inner container

[sporenborg]

Hi!

What am I doing wrong that the breadcrumb, cat-links entry-meta content is outside the content-container? The default layout is set to full width and the content is managed by the inner container. Where is the option to set the named issues inside the inner container as well?

Thank you very much

[David]

Hi there,

how did you add the breadcrumb and cat-links to the site ?

[sporenborg]

Hi David,

the cat-links instructions I have taken from one of your help topics

// move entry-meta before entry-title
add_action …

and the breadcrump realised by a php hook

<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p class=”breadcrumbs” id=”breadcrumbs”>’,'</p>’ );
}
?>

as well from one of your help topics …

Both looked the same before it was inserted …

[David]

Lets deal with the Breadcrumbs first. In that snippet you will see:

class="breadcrumbs" change that to: class="breadcrumbs grid-container"

[sporenborg]

Did it and works 😉

[sporenborg]

Hi David, what about the next step?

[David]

Can you share the entire function you’re using to add the meta ?

[sporenborg]

The mentioned (only one) code in the functions.php is now comment-out. (lines 51>71) All additional css is deleted. Now the margin of all the other inner containers don’t work on mobile. The padding of the customizer > container doesn’t have any impact. The child theme seems to be ok according to your recommendations.

The Breadcrump-hook is deactivated too. All the stuff should be clean now.

[David]

Sorry i am confused.
I no longer see the breacrumb or the meta – are you changing requirements ?

[sporenborg]

That was not my intention. I wanted to reduce the confusion. You have already solved the breadcrumb problem. Let’s ignore it at this point.

In the current state, the webpage should be in the “factory settings” mode. however, there is the issue of spacing in mobile mode with the entry-meta in footer. That’s what I asked you as a second question, although I just realised that I meant the mobile mode.

Conclusion:

1) entry-meta hits left and right margin – is without spacing.
2) complete content also hits left and right margin – is without spacing.

Customizer > Container > Spacing is without function on mobile

The way I see it, the only option is to globally assign a padding-left and padding-right to the p and h in the gb-container class. But I can’t imagine that … 

[Fernando]

Hello there,

For reference, can you share screenshots of the issue on the Frontend?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[sporenborg]

Hi,

a very good suggestion! I put the screenshots (I have added the terms mobile and desktop) to the file name, sent in private information.

thx

[Fernando]

You have a Layout Element called “Page Builder Blog” that’s setting posts to full width.

Some sections on your posts have max-widths through Container Blocks. You can remove those and set a width through Appearance > Customize > Layout > Container.

Alternatively, you can add this through Appearance > Customize > Additional CSS:

footer.entry-meta {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px){
    .entry-content, footer.entry-meta {
        padding: 0 20px;
    }
}

[sporenborg]

Hi Fernando,

everything works wonderfully in the desktop view. However, on tablet and mobile my desired layout is not reproduced.

PROBLEM
The first container is full width (without internal spacing) = 100 % width and has a yellow background. The second / inner container has content width (without inner space) and limits text and other content.

Everything works fine on the desktop. Tablet and mobile now limit the first container due to your recommended CSS code, so that the background does not extend from the left to the right edge. You could circumvent the problem by assigning a class to the inner container and then using CSS … 

.classname {
max-width: calc(100% – 60px);
margin-left: auto;
margin-right: auto;
}

writes something like this. But is this awkward way really the solution? Then I have to assign the class to every inner container that should have a margin on the left and right … or am I thinking too complicated?

My wish would be: Container is Full width (without inner spacing) = 100 % width with a background colour or without … the content is limited. And the whole thing is defined globally once via the Customizer.

OR does this not work because ELEMENTS overwrites the Customizer statement?

Please note the url in PI! I have put the sample specifications on the website as text.

[David]

1. Change this CSS:

@media (max-width: 800px) {
    .entry-content, footer.entry-meta {
        padding: 0 20px;
    }
}

to:

@media (max-width: 800px) {
    .full-width-content footer.entry-meta {
        padding: 0 20px;
    }
}

Now all content on your Full Width Page will fill the width of the screen. But the post meta won’t as you have CSS to control its max-width and the above CSS to give it padding on smaller screens.

Now for the Content.
Each section of the page, add a Container Block [#A].
This will be full width, and you can add your background image or color.

Now if you want your content within that container to be limited in width then add a inner Container Block [#B] as shown here:

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

Now you choice to add Spacing > Left / Right Padding to either #A or #B Container.

[Author]

Posts