Site logo

[Support request] How to make image full width on home page

Home Forums Support [Support request] How to make image full width on home page

Home Forums Support How to make image full width on home page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2543248
    Bella

    Hello therem

    I’m trying to add an image to the top of my homepage (a new page I’ve made that I’ll use as my homepage) that expands the full width of the screen. I’ve changed ‘Container’ to be ‘full width’ and ‘inner container’ to be full width’ but it won’t budge.

    What am I missing? huge thanks in advance

    Image to show what I mean: https://imgur.com/a/WBgQlJz

    #2543266
    Ying
    Staff
    Customer Support

    Hi Bella,

    If you want to make a section full width, you’ll need to make the entire page’s content container full width first.

    You can find the option at layout metabox in the page editor’s right sidebar:
    https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

    #2545900
    Bella

    Thank you Ying – that worked! How can I keep the container blocks below (with 3 grids/blog posts in them) at the original width (i.e. not full width)? I can’t seem to fix this with padding (it just makes the feature images really small)

    #2546390
    David
    Staff
    Customer Support

    Hi there,

    use a GB Container Block to divide your full width page into sections.
    If using GB 1.7, when you add a Container Block to the top level of the page, it gives you the option in its toolbar to insert a Inner Container, which will be centred and have a max-width already set.

    #2548990
    Bella

    Hi David,

    Sorry I’m not sure I understand – am I supposed to add the top image (with the corgi) into an ‘inner container’? What max-width should I use?

    https://www.linkpicture.com/q/Screenshot-2023-02-27-17.14.27-Display-2.png

    #2549137
    Ying
    Staff
    Customer Support

    It sounds like you are using GB 1.6.

    In that case, you can set both the outer and inner containers to full width to show the full-width image.

    Then you can add another container below, set full width for the outer container and contain for the inner container, then add the Query loop block inside of it.

    For more info about container block: https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-standalone-block

    #2550194
    Bella

    Hi Ying,

    I’ve followed your instructions but when I add a new container and try to make it full width, these are the only options I have under the layout tab? https://www.linkpicture.com/view.php?img=LPic63fe1e5c9984c1533071148

    #2550424
    Ying
    Staff
    Customer Support

    oh, it’s the GB 1.7’s UI, then containers are full width by default unless you’ve entered a value for max-width.

    You can add the image inside the container, and set the image width to 100%, if the image file itself is wide enough, it will go full width.

    Note: you don’t need an inner container for the image layout.

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