-
Hi
I am having a problem with the container block height on mobile, within a grid on the site below.
Within the grid, the structure is:
– Container
— Image
— Headline
— Container
— Paragraph
— Paragraph
— Paragraph
— Button
As you can see on the image below. Temp login link included in cases you need it.Cheers
Shaun -
Hi Shaun,
Switch to mobile editing and do the following:
For this container, set Margin Top and Margin Bottom to 0:
For this container, remove the fixed height currently set to 220px:
Apply the same settings to each of the grid items.
-
Thx. That worked perfectly.
-
Glad to hear that! 🙂
-
Hi Again
I have reopened this topic, because I don’t want fixes to me next question (desktop) to undo the above setting changes you gave me for mobile.
I have created a cloned page on a website (URL below). If you scroll down that page a bit, you will see a section, Our Residential & Commercial Services
Within that section, you will see several service cards. I changed the Book Now buttons on most of these cards to a Global Pattern, since they all link to the same external booking service, so I can update them all at once if my client changes services.
But now, the desktop formatting is off (see video below).
What I want to achieve is (desktop and tablet)
– vertical rows of cards (containers), the same height as other cards in the same row
– cards to be as high as needed for the content within
– Book Now button always at the bottom, with just the card’s bottom padding below itI have added a temporary login link below, in case it helps you. The page is called Cloned Page.
Thanks
SHaun -
Hoping you got my request above
-
Hi Shaun,
These articles should help:
https://docs.generateblocks.com/article/equal-height-grid-containers/
https://docs.generateblocks.com/article/vertical-alignment-of-content-in-grid-container/Let me know if you have any questions while implementing the steps.
-
Thanks, Alvind
I implemented the 2 steps on the first row of 3 cards, but the results look terrible. See cloned page below.
-
Looks like you’re currently editing the page. Let me know when you’re done—or is it okay if I take over for now?
-
All done
-
It is looking better, but there are still issues:
– The first paragraphs after the card headings don’t vertically align with each other
– The button in the third card doesn’t align with the others
See attached picture -
The first paragraphs after the card headings don’t vertically align with each other
In Container 1, go to Layout > Justify Content and set it to Flex Start.
Then select the H4 heading inside that container and remove the bottom margin value.
The button in the third card doesn’t align with the others
Try removing the bottom margin value from the button wrapper container.
-
Thx again Alvind
I implemented the above. A new, related problem is now the card titles are not aligning horzontally – see live page or video below.
-
I inspected the Grid, and it looks like this hasn’t been implemented yet:
In Container 1, go to Layout > Justify Content and set it to Flex Start.
- You must be logged in to reply to this topic.