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.

GeneratePress GenerateBlocks

Responsive design issues

  • b_generated
    August 24, 2025 at 4:34 pm

    Hi,

    I’ve created a header section using the Element Block but I’m have having an issue styling this section, specifically the responsive layouts.

    I’ve checked how the site responds on different screen sizes using a site called: https://responsivetesttool.com/

    On the 1280px screen size, the logo and header items overlap. To resolve this, I’ve created a new media width in the AT-RULES as follows: @media (max-width:1280px) in the hope that I can correct the overlapping issue. However, I am not able to style anything whilst in this view. I’ve tried changing backgrounds, margin and padding sizes, text color and sizes and many other styles to multiple elements in the block but nothing changes at all. I can’t figure out if there might be another style sheet overriding these rules?

    Please could you assist?
    The site is being developed here: https://staging-r.perthgeeks.com.au/Staging/

    Thanks

  • Alvind
    August 24, 2025 at 10:39 pm

    Hi there,

    The custom @rules apply only on a per-block level, and they aren’t true breakpoints like the default desktop, tablet, and mobile breakpoints. This means they aren’t ideal for your use case, since you would need to manually assign the custom @rules to each block individually, which is inefficient and hard to maintain.

    In this case, you’ll need to use custom CSS instead. Let us know if you’d like help setting that up.

  • b_generated
    August 25, 2025 at 5:22 am

    Thanks Alvind.

    That explains a lot.
    Any help would be greatly appreciated.

  • Ying
    August 25, 2025 at 8:48 am

    The main container gb-element-05c711c5 has margin-left and margin-right set to 300px, can you remove that?

    This should fix the overlapping issue.

    Let me know 🙂

  • b_generated
    August 25, 2025 at 3:35 pm

    Thanks Ying

    I’ve changed container gb-element-05c711c5 to have margins of 10px. But that doesn’t seem to make any difference.
    Am I doing some thing wrong?

  • Alvind
    August 25, 2025 at 8:17 pm

    The gb-element-05c711c5 container’s left and right margins still seem to be set to 300px:
    https://cln.sh/kMQ7z52MLLfSkZt86CZK

  • b_generated
    August 26, 2025 at 12:35 am

    Hi Alvind

    The margins for that element are set to 10px (left and right) in the spacing section.
    See here:
    https://ibb.co/prNkH0D9

  • Chaz
    August 26, 2025 at 2:56 am

    Hi there,

    I only see the 300px margin on the Home Page. Other pages show the correct 10px margins. This looks like a caching or dynamic CSS issue.

    Troubleshooting:

    • Go to Dashboard → GenerateBlocks → Settings and regenerate the CSS.
    • Clear any caches on the site/server. If your server uses caching, I’d suggest keeping it disabled during development.

    If the issue continues, select the block, duplicate it, and delete the original.

  • b_generated
    August 26, 2025 at 5:19 am

    Thanks Chaz

    Regenerating the CSS solved the problem.

  • Chaz
    August 26, 2025 at 11:40 pm

    Great to hear that regenerating the CSS fixed the issue.

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