Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Mobile Layout Issue: Right Padding Missing on Paginated Blog Archive (/blog/page

  • Hello GeneratePress Team,

    I’m experiencing a layout issue specifically on the paginated pages of my main blog archive (the page set as “Posts page” in Reading Settings, which is /blog/ on my site), but only in mobile view.

    The Problem:

    * On the first page of the blog archive (/blog/.blog body class), the mobile layout displays correctly with the expected left and right padding (set to 24px via a GenerateBlocks container).
    * However, on page 2 (/blog/page/2/.blog.paged.paged-2 body class) and subsequent paginated pages, the right-side padding disappears on mobile view. The content extends to the right edge of the viewport. The left padding seems correct.
    * This issue does not occur on paginated category archives (e.g., /category/my-category/page/2/.archive.category.paged body class), which use a similar Element structure and the same Loop Template.

    My Setup:

    * Theme: GeneratePress (Premium activated) with a child theme.
    * Plugins: GenerateBlocks Pro.
    * Reading Settings: Static Homepage (“Accueil”), “Blog” page set as Posts page.
    * Layout: Using a GeneratePress Block Element (Content Template type) assigned to the “Blog” location to build the entire archive layout (Hero, main content grid/sidebar, pagination). The base layout is set to “Full Width”.
    * Container Structure: The main content area within the Element is wrapped in a GB Container (uniqueId: f6e2df46, class .hero-inner-container) which has padding-left/right: 24px set for all devices.

    Troubleshooting Done:

    * Verified the padding settings on the main GB container (.hero-inner-container).
    * Inspected the CSS using browser developer tools on /blog/page/2/ in mobile view. Computed styles don’t show the 24px padding being overridden by a specific rule I can identify.
    * Attempted to force the padding using custom CSS targeting body.paged.blog .hero-inner-container and body.paged.blog .content-area with !important, but this did not resolve the layout shift.

    Request:

    Could you please provide some insight into why the right padding might be missing specifically on paginated blog archive pages (.paged.blog body class) in mobile view, when it works correctly on the first page (.blog body class) and on paginated category archives (.archive.category.paged body class) using a similar Element structure?
    Is there a default GeneratePress style or structural difference for .paged.blog archives on mobile that might be interacting unexpectedly with the Block Element layout? Any suggestions for a CSS fix or a setting adjustment would be greatly appreciated.

    I have provided the URL of the affected page in the private information box below. Let me know if temporary login credentials are also needed.

    Thank you for your excellent theme and support!

    Best regards,

    Reda

  • Hi there,

    It looks like the pagination block is causing the issue. To fix it, edit the Element and select the pagination block. Then, under Layout > Flex Layout, set Flex Wrap to Wrap.

  • Hi, Thank you Alvind !

    It works well for the second page, but from the 3rd page of the blog to the penultimate page, the right-hand margin is missing again. The last page also works well.

  • Did you remove your site link? Can I see the current issue on your site?

  • Ying, here’s page 3 of the blog concerned and that’s down to the penultimate page on mobile (the last is ok like the first and second). I put the link in the private information.
    Thanks a lot!

  • the right-hand margin is missing again

    Sorry, which element are you referring to? I compared the page 2 and page 3, they look identical to me.

    This is what I see on page 3:
    https://app.screencast.com/Pk43JuhVG95vW

    Let me know if I miss anything!

  • The margin problem arises if you switch to “Dimension: Iphone 12 Pro” (resolution 390×844) because on Iphone 14 pro max (430×932, the view you probably used with the chrome inspector) the margins are correct.

  • For the Grid gb-element-0345c43a, can you set its display to block on mobile or set its grid-template-columns to 100% instead of 1fr?

  • Thank you very much Ying ! It works perfectly with 100% on the element you suggested.

  • Awesome! Glad to hear that 🙂

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