- This topic has 7 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
April 18, 2020 at 7:36 am #1244161Nicolaas
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
April 18, 2020 at 5:40 pm #1244813TomLead DeveloperLead DeveloperHi 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 🙂
April 19, 2020 at 3:32 am #1245088NicolaasThanks 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
April 19, 2020 at 4:13 am #1245120DavidStaffCustomer SupportHi 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.
April 20, 2020 at 4:14 am #1246394NicolaasThank 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
April 20, 2020 at 4:26 am #1246410DavidStaffCustomer SupportThe Document>Container>Grid>Container has its own background settings so you shouldn’t need to add the extra >Container block
April 20, 2020 at 8:30 am #1246836NicolaasThanks David,
Removed the container and all works fine.
So all for now resolved!
Looking forward to the official release of GenerateBlocks.
Regards,
Nicolaas
April 20, 2020 at 10:33 am #1246967DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.