- This topic has 7 replies, 3 voices, and was last updated 3 months, 2 weeks ago by David.
April 18, 2020 at 7:36 am #1244161Nicolaas
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?
NicolaasApril 18, 2020 at 5:40 pm #1244813TomLead DeveloperLead Developer
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 🙂April 19, 2020 at 3:32 am #1245088Nicolaas
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.
NicolaasApril 19, 2020 at 4:13 am #1245120DavidStaffCustomer Support
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.April 20, 2020 at 4:14 am #1246394Nicolaas
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!
NicolaasApril 20, 2020 at 4:26 am #1246410DavidStaffCustomer SupportApril 20, 2020 at 8:30 am #1246836Nicolaas
Removed the container and all works fine.
So all for now resolved!
Looking forward to the official release of GenerateBlocks.
NicolaasApril 20, 2020 at 10:33 am #1246967
- You must be logged in to reply to this topic.