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 (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Fixed Container sizes

  • Hi team,
    I’ve been going around in circles trying to to get 2 containers to neatly fit into an image collage I have created. As you will see, I have created 5 images, some in a 4:3 ratio and some Square. They should all fit together nicely with a 10px gap between them, however the last 2 images / containers, won’t play nice. I have tried using a Grid and experimented with different Width percentages, but cannot seem to get them to fit neatly. Either the 4:3 image is too small or the square image too big or they don’t fit flush with the bottom and sides. How can I force either the images or the containers to fit perfectly?

  • Hi there,

    I just looked at your layout and it’s almost perfect. Have you made any adjustments since?

    If you want the grid container to be perfectly flush at the bottom, you can add a 20px padding-top on the bottom-right image block.

  • Hey Alvind
    Where you found it is the best I can get, but still not right. I just added 20px padding to the top of that image and it is now way too low? I have adjusted the images sizing again, but now have a big gap between the images. Is there not a way I can force the container to keep the images inside and stretch the images if necessary to fit properly?

  • I’ve recreated the container layout, but I did it slightly differently from how you did it. You can copy the layout I created below. The layout should look like this:

    In the editor, click the three-dot menu at the top and choose the ‘Code Editor’ option. Then, copy and paste the following block HTML into the editor and switch back to the Visual Editor.

    <!-- wp:generateblocks/container {"uniqueId":"5485aef3","isDynamic":true,"blockVersion":4,"spacing":{"paddingTop":"30px","paddingBottom":"30px"}} -->
    <!-- wp:generateblocks/container {"uniqueId":"194460db","isDynamic":true,"blockVersion":4,"sizing":{"maxWidth":"1200px"},"spacing":{"marginRight":"auto","marginLeft":"auto"}} -->
    <!-- wp:generateblocks/grid {"uniqueId":"363c79d7","columns":5,"horizontalGap":10,"verticalGap":10,"isDynamic":true,"blockVersion":3,"className":"main-grid-container"} -->
    <!-- wp:generateblocks/container {"uniqueId":"012a9fe6","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"","height":2400,"width":1920,"orientation":"portrait"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"40%","widthMobile":"100%","minHeight":"300px"},"className":"container-1"} /-->
    <!-- wp:generateblocks/container {"uniqueId":"9182bb4e","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"","height":1229,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"60%","widthMobile":"100%","minHeight":"500px"},"className":"container-2"} /-->
    <!-- wp:generateblocks/container {"uniqueId":"95b3b2d5","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"","height":1374,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"40%","widthMobile":"100%","minHeight":"500px"},"spacing":{"marginTop":"-200px"},"className":"container-3"} /-->
    <!-- wp:generateblocks/container {"uniqueId":"6eca48f8","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"","height":1282,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"25%","widthMobile":"100%","minHeight":"300px"},"className":"container-4"} /-->
    <!-- wp:generateblocks/container {"uniqueId":"a8e00f98","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"","height":1280,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"35%","widthMobile":"100%","minHeight":"300px"},"className":"container-5"} /-->
    <!-- /wp:generateblocks/grid -->
    <!-- /wp:generateblocks/container -->
    <!-- /wp:generateblocks/container -->
  • If I use the Code editor, it changes the entire page. I only want to edit that one container. How do I only select the one container to enter the html?

  • Its OK. Instead of using the code editor, I added a fresh container and html block inside it. Then I copied the html in and it works a treat.

    Thanks so much

  • Awesome! Glad to hear that.

  • Sorry, just realised. I am working on some CSS which would add an overlay effect on hover which reduced the brightness of the image and presents a headline text in the centre. Now that we are using HTML instead, I have no idea where to start with that? How can I add an overlay on hover with text?

  • The layout was created using a Grid Block, and you can add those effects from the settings control. We have documentation on how to do that here:

  • Hey Alvind,
    Those instruction are perfect if I was using the the previous blocks, but we are using HTML now. How do I apply those instructions in its current HTML form?

  • Ah ha! Figured it out. Had to convert to blocks. All sorted now, thanks

  • Glad to hear that!

  • So sorry again, I have applied the effect successfully to the blocks at the bottom of the page, but using the same effect in the collage isn’t working. As you can see, I have set it up for the first block called ‘Brass Handrails’ and it is displaying the overlay before the hover and making it disappear when you hover over it. It is not covering the container either?
    Sorry about this?

  • Hi there,

    can you share a link to your site where i can see the issue ?

  • Not sure why the url disappeared from Private info, but I’ve put it back now.

  • Hmmm… the collage layout adds more complication here.

    I’ll try and explain.
    The column container block is a Flex Column. This changes the content flow, so its children ( the inner blocks ) behave differently. And one noticeable affect is the child elements height can collapse.
    Which is the issue you see in the collage.

    The reason for the overlay to collapse is its height is set to 100%.
    As flex column child it will look to its parent container for a height.
    But that parent container has only a min-height set ( of 300px ), so the browser cannot calculate an explicit height for the child element.

    Whereas the working version, the parent has a min-height of 600px and a height of 100%. It this height value that allows the browser to calculate the height of the column, and pass that to the child.

    So if you select the collage container with the min-height of 300px and set its height to 100%. You will see it kinda works as expected…. except you’re hacking the grid with negative margins so in this scenario it won’t work correctly. Instead you would have to set a specific height value eg. height: 300px

    But that collage layout will cause you issues using negative margins …..

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