[Resolved] Grid challenge

[Emily]

Hello. Thank you so much for all of your support so far. I have one more thing I need to resolve for a site I’m working on…

I need the three boxes in this section to look just like it does, but have the Learn More buttons be attached to their respective boxes. Right now, I have a grid, so the shadowed boxes are all the same height (a design requirement) but I can’t figure out how to get the buttons in there so they stay under each shadowed box. When I go to the mobile site, the buttons go under all three boxes, which is not right.

https://www.predictiveiq.com/#solutions

How can I make each button stay with its shadowed box?

Thank you!!

[Ying]

Hi Emily,

Can you add the buttons inside the box first?

Let me know!

[Emily]

Hi Ying,

I thought about doing that but I would rather have the buttons outside of the box like they are now. Is what I want to do even possible? Or do they have to be inside the shadowed boxes? The shadowed boxes need to be the same height, and the buttons need to line up underneath.

[David]

Hi there,

those buttons must be in their respective Grid Column containers. Otherwise they will all stack together on mobile.

If need be, you can always add another Container block inside the column container, and use this to add your content and shadow styles. Then the button can come after that inner container block.

[Emily]

Thanks, David. If I do that, though, the shadowed boxes won’t stay the same height, will they?

[Emily]

Can I add a container that aligns to the bottom of the shadowed container? Is that possible?

[David]

It may require some CSS for now.
If you can make those changes and let me know i can take a look.

[Emily]

I put the buttons inside the grid container… tried some things with CSS to make it go to the bottom but I’ve not been successful thus far. 🙂

[Josh]

Are you saying you want the buttons to be at the bottom IN the box? But all of them at the same level? Usually I do this by forcing a div height on the paragraph on desktop.

You can see how it would work with this code:

.gb-container .gb-inside-container p {
  height: 300px;
}

If you want it specific add an ID to the row and put it front if the selector above. So if your row id is predictive you would use:

#predictive .gb-container .gb-inside-container p {
  height: 300px;
}

You’ll want this in your media query if you only want it on mobile. Something like this in your css:

@media (min-width: 1025px) {
    #predictive .gb-container .gb-inside-container p {
      height: 300px;
    }
}

Don’t add another media query if you already have it though. Just place it in there.

[Ying]

Hi Emily,

1. Set all the images’ width to 100%, and height to 270px, object-fill to cover.
2. To simplify the structure, move the buttons block out of its current parent container, so every column has the same structure as below:
– Gird container (gb-container-shadow)
— h2
— image
— blue container with h3
— container with p
— buttons

Once it’s done, we can provide CSS to make it work.

[Emily]

Hi Ying,

Thank you so far! I updated the structure so each grid container contains h2, image, container with h3, container with p and buttons.

What next?

[Fernando]

Hi Emily,

This is what I’m seeing now on Desktop: https://share.getcloudapp.com/wbuvmyLg

The columns are equal in height. Would you like to align the buttons as well?

Also, can you provide a brief explanation of how you want it to look on mobile?

[Emily]

Yes, I would like the buttons to line up along the bottom of the columns.

Mobile can just stack, equal column height isn’t important.

Thank you!

[Fernando]

I see. It’s already stacked on mobile.

For Desktop view, try adding this CSS through Appearance > Customize > Additional CSS to align the buttons:

.gb-grid-wrapper.gb-grid-wrapper-003f3f0b > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.gb-grid-wrapper-003f3f0b > .gb-grid-column > .gb-container > .gb-inside-container > .gb-button-wrapper {
    margin-top: auto;
}

In the upcoming GenerateBlocks update, this should be possible without the need for custom CSS.

[Emily]

Woo hoo, thank you, Fernando! It looks perfectly. I appreciate all of the support I’ve been given!!

[Author]

Posts