[Resolved] Max height row in container/grid block?

Home Forums Support Max height row in container/grid block?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1244161
    Nicolaas

    Hello,

    I sent this question some day ago through the contact form to GenerateBlocks but no reply, so I hope you can help.

    I am setting up a template for landing pages in my site using Dispatch theme. For the header I would like to have largely the same outlay as the picture/text block in top in https://m.bestreviews.com/best-laptop-computers. In my case Image and text block don’t have to overlap line in Bestreviews,.

    I have created with GenerateBlocks a 2-column/1-row grid block inside a container. In the left container of the grid block I have inserted an image. In the right a headline, some text and button. (see Bestreviews example).

    I now want to set the height of the container or grid-block to a fixed height. The image if bigger (so independent of size) should be forced into the height of the left grid (like width 100%/height 100px: so will be cut off horizontally). The text in the right grid cut off before the Button. Much like WP Posts does that in Dispatch theme on frontpage upperleft.

    The two columns should have equal heights and the image height aligns with the right grid’s bottom of the button.

    There is no setting for max height and I have tried out using attributing Advanced CSS Classes and Simple CSS and grid CSS etc.

    Can you please help? Or should I find another solution for GB for the time being and wait for PRO?

    Nicolaas

    #1244813
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can link me to what you’ve built so far? Something like that should definitely be possible with the current version of GB.

    Let me know 🙂

    #1245088
    Nicolaas

    Thanks so much!

    Here is the link https://www.snacq.com/wp-admin/post.php?post=2992&action=edit.

    Sent login data per mail to your wordpress@ address.

    Cheers,

    Nicolaas

    #1245120
    David
    Staff
    Customer Support

    Hi there,

    i would suggest that you do not use an Image Block.
    Instead add the image as a background to your left hand column.

    The height of the image will now be responsive and based upon the height of the right hand column.

    When it comes to mobile you will want to add some top/bottom padding or minimum height to your image column.

    Fixing the height of a grid item in a row is not a good idea. As the screen gets smaller the Text column will grow in height. The above method will make sure the image responds to those changes and always fills the space.

    #1246394
    Nicolaas

    Thank you very much David!

    Still trying to get the hang of everything grid and blocks ;).

    So I entered a grid of two columns in a new container in page container. I cannot immediately assign Background image to left block, right? I need first to add another container for the left column to set the bg image.

    So now I have for the loft column now Document>Container>Grid>Container>Container.

    And then with thumbnails at bottom I have to select the first container after Grid and not the second to add bg image, is this correct?

    It works for me now but just want to be sure before we close this topic.

    Again: thanks for your quick and always helpful replies!

    Nicolaas

    #1246410
    David
    Staff
    Customer Support

    The Document>Container>Grid>Container has its own background settings so you shouldn’t need to add the extra >Container block

    #1246836
    Nicolaas

    Thanks David,

    Removed the container and all works fine.

    So all for now resolved!

    Looking forward to the official release of GenerateBlocks.

    Regards,

    Nicolaas

    #1246967
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.