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

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

Home Forums Support ‘cat-links’ and ‘entry-meta’ outside the inner container

  • This topic has 23 replies, 3 voices, and was last updated 11 months ago by David.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2607052
    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

    #2607161
    David
    Staff
    Customer Support

    Hi there,

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

    #2607465
    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 …

    #2607485
    David
    Staff
    Customer Support

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

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

    #2607566
    sporenborg

    Did it and works 😉

    #2608169
    sporenborg

    Hi David, what about the next step?

    #2608327
    David
    Staff
    Customer Support

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

    #2608386
    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.

    #2608641
    David
    Staff
    Customer Support

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

    #2608664
    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 … 

    #2609156
    Fernando
    Customer Support

    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

    #2609293
    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

    #2609304
    Fernando
    Customer Support

    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;
        }
    }
    #2609505
    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.

    #2610466
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.