Homepage Design

  • collinslad
    July 1, 2026 at 11:55 pm

    I’m trying to create a new static homepage using GP Premium & GB Pro similar to the one in the enclosed image (that site isn’t built with GP).

    I want the first post at the top to be full width (ignoring the sidebar) with the title on top of the featured image. Other posts below include the sidebar.

    I’ve followed various online solutions but can’t get any of them to work properly on desktop and mobile – can you help please?

    Thanks

    https://postimg.cc/Lq38jVmB

  • Ying
    July 2, 2026 at 7:27 am

    Hi there,

    Can I see what you’ve built so far?

  • collinslad
    July 2, 2026 at 7:55 am

    I’ve added login details to the private area. This is a test site – not the main one. I used a layout block element for the top post and a normal query block for the others – I can’t get the sidebar to be ignored by the first post.

  • Ying
    July 2, 2026 at 8:59 am

    I would create a block element – page hero for the 1st post, so it sits above the content area and the sidebar area.

  • collinslad
    July 2, 2026 at 9:18 am

    Thanks – I think I tried that but will have another go.

  • Ying
    July 2, 2026 at 9:55 am

    Let me know when the page hero is created, I can check it for you 🙂

  • collinslad
    July 3, 2026 at 1:08 am

    I’ve created a page hero – it looks ok on desktop but awful on mobile – I’ve obviously done something wrong but can’t work out what.

  • Ying
    July 3, 2026 at 9:50 am

    You’ve set the root container of the page hero to width:1200px;, which make is to be 1200px on all devices, even if the screen width is narrower than 1200px.

    You need to remove 120ppx from the width field, add it to the max-width field instead, and set its margin-left and margin-right to auto to center it.

  • collinslad
    July 3, 2026 at 9:29 pm

    Thanks, that’s a bit better but it still isn’t correct on mobile – the image is cropped.

  • Alvind
    July 5, 2026 at 7:30 pm

    Hi there,

    In the mobile view, the root Container currently has a fixed Width of 768px.

    Could you try removing that value?

  • collinslad
    July 5, 2026 at 10:36 pm

    I can’t see that the root container has a width set in the mobile view – it looks empty to me.

  • Alvind
    July 5, 2026 at 11:25 pm

    That could be a caching issue, as the width is still being applied on the frontend from what I can see.

    Could you try temporarily disabling LiteSpeed Cache to see if that confirms whether the cache is causing the issue?

  • collinslad
    July 5, 2026 at 11:40 pm

    I’ve disabled the cache and it’s still not looking right on my iPhone – I cleared Safari & Chrome as well.

  • Alvind
    July 6, 2026 at 5:06 am

    Ah, the page hero section is built using a Block Element.

    You’ll need to edit that Page Hero Element and remove the Width value there.

  • collinslad
    July 6, 2026 at 5:25 am

    Thanks but that doesn’t work either – the root container in the page hero is set to 1200 MAX width – if I remove that the desktop version is too small and the post template container is set to 100% on desktop – mobile inherits that with no option to change the max width.

  • Ying
    July 6, 2026 at 8:03 am

    I do not see the width value anymore. I assume you’ve removed it; the desktop looks normal.

    What is the issue right now? Let me know 🙂

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