Grid challenge – GeneratePress

This topic has 15 replies, 5 voices, and was last updated 2 years, 9 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
November 29, 2022 at 1:08 pm #2441797

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!!

November 29, 2022 at 4:38 pm #2441986

Ying
Staff
Customer Support

Hi Emily,

Can you add the buttons inside the box first?

Let me know!

November 30, 2022 at 7:05 am #2442788

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.

November 30, 2022 at 7:34 am #2442835

David
Staff
Customer Support

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.

November 30, 2022 at 7:52 am #2443035

Emily

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

November 30, 2022 at 7:56 am #2443044

Emily

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

November 30, 2022 at 8:26 am #2443091

David
Staff
Customer Support

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

November 30, 2022 at 9:33 am #2443242

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. 🙂

November 30, 2022 at 10:14 am #2443291
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.
November 30, 2022 at 12:19 pm #2443448

Ying
Staff
Customer Support

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.

December 6, 2022 at 1:27 pm #2452027

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?

December 6, 2022 at 5:45 pm #2452253

Fernando
Customer Support

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?

December 6, 2022 at 6:57 pm #2452293

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!

December 6, 2022 at 7:11 pm #2452298
Fernando
Customer Support
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.
December 7, 2022 at 9:57 am #2453416

Emily

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

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Grid challenge

Popular Articles

Start building better websites today.