Problem with button alignment

HI there,

Is there a specific section/page I should be looking at?

Leo - it’s the front page; the section with the two books. It’s the only grid block on the page. Sorry - should have been more specific.

Hi there,

Making the parent element (.gb-inside-container) use flexbox will prevent the float property from working.

If I may suggest:

Try wrapping your floated image and paragraph in a container block.

So the structure would be:

-> GB column container
->-> H2 Block
->-> Container Block
->->-> Image Block (Floated left)
->->-> Paragraph Block
->-> Button Block

This is so your floated image won't be affected by the flexbox application from your CSS.

Elvin - that didn't work either. I left the container with the two books on the page (below the "Sher's got blankets!" section) so you could see - float left still not working and the buy buttons still don't line up. It seems that button CSS as written won't play nice with the float.

After fiddling around with it for hours, I gave up, changed direction, and created the grid container you can now see with the 4 books (Books - recipes, stories, gardens and more!)

Strange.

Here's my setup on how to make it work if you still want it.

Demo page:
https://dev-generate-press.pantheonsite.io/18768-2/

Settings involved:

Here's the CSS:

.flexbox > .gb-inside-container {
    display: flex;
    flex-direction: column;
		height: 100%;
}

.flexbox > .gb-inside-container .gb-button-wrapper {
	margin-top: auto;
}

Here's the Block Layout:
https://share.getcloudapp.com/Jru4Nz66

It's not visible on the block editor but as you can see on the actual live demo page, it works.

The ongoing saga...

The buttons line up with the CSS solution above, Elvin, but the grid containers are no longer the same height.

I've temporarily commented out the CSS that DOES make the buttons line up in the top grid (with the 4 books) to see if it in any way was interfering with the .flexbox CSS - it does not appear to be the case.

There are now two examples of the grids with your CSS applied; the one with the images floated left (which I quite like and would like to use as it's a nice size on mobile as well, and then I also tried a version with the images (large) centred. In both instances, the buttons line up fine - but the items in the grid have different heights. I did find and apply a few bits of CSS that purported to make everything the same height - but none worked in this case, so I removed them.

The Demo page I've presented has equal grid size among its columns.

Try cleaning your CSS for things that may conflict with my suggested CSS settings and follow the block layout so your columns behave the same way as my demo.

Everything you need is in this reply.
https://generatepress.com/forums/topic/problem-with-button-alignment/#post-1714804

Elvin, I have followed your layout EXACTLY.

If you look at my page code and compare the code to your page's code, you'll see that.

To show you - I've created a completely un-styled inner container as you have shown, and then directly below that, I've duplicated the entire grid and then added the drop shadow on the inner containers (around the paragraph and image). As you can see, the INNER containers aren't the same length. I would (obviously) like them to be the same length.

There is NO custom CSS other than the CSS you provided, an @media bit that sets the font sizes for mobile, and a bit that adds 20px of margin on the bottom of the images. That is ALL. Even if I comment those out - which I have now done, though they obviously have nothing to do with this problem, the inner container of the grid is NOT the same length. And I cannot figure out why.

If you can't figure this out, please ask Tom or David to have a look.

Ah I see what's the issue here.

I forgot to tell you that you have to add flexbox on the the additional CSS field of each column container blocks. That's my bad.
https://share.getcloudapp.com/X6ueYxZr
https://share.getcloudapp.com/jkuLJdxB

That's to make sure the CSS works. It's for making the column height even.

Elvin, they do have the class added exactly where you have it.(since you hadn’t said which bits to apply the custom CSS to, I had looked at the code on your page to figure it out.) I think you’ll find that if you add a drop shadow to the inner containers on your page, you will end up with the same result I am seeing on my page.

Elvin, they do have the class added exactly where you have it.(since you hadn’t said which bits to apply the custom CSS to, I had looked at the code on your page to figure it out.) I think you’ll find that if you add a drop shadow to the inner containers on your page, you will end up with the same result I am seeing on my page.

I see what you mean.

My focus was the button alignment(topic) and it actually is aligned as shown here:
https://share.getcloudapp.com/04uArGJQ (the columns' height values are already equal as well.)

What you wanted was to align the float content container as well.
(removing the space indicated in red here - https://share.getcloudapp.com/Jru4Xj4w)

If that's it, here's how to do it.

Select the container block that wraps your floated image and the paragraph.

Add flexbox-content on it's additional CSS.

You then add this CSS:

.flexbox .flexbox-content{
height: 100%;
}

Here's the expected result: https://share.getcloudapp.com/o0u6kNer

Thanks, Elvin - that last bit of CSS fixed it the inner container height issue! :)

So...one other niggling detail: in tablet view in the customizer, despite there being 40px of bottom padding on that container, the image is only about 5px above the bottom edge. Adding padding to the image wasn't going to help (as it's inserted before the paragraph - it simply moves the paragraph down).

So, I dug around and found a forum thread with someone trying to get RID of the space and adapted the CSS to ADD space. It worked. :) In case anyone else has this issue:

}
.extra-margin-bottom figure {
    margin-bottom: 40px !important;
}

And extra-margin-bottom is then added to each of the images' additional CSS that needs it.

One last question related to this grid layout...I'd like it if the images in PHONE view were the full width of the inner container - I'm assuming I can do this with some @media CSS, but am not sure which selectors to use. I found this forum entry which is similar - though talking about featured images. https://generatepress.com/forums/topic/full-width-image-on-mobile/

Ah right yeah that's true. If you want the bottom padding for image blocks from WordPress default CSS, you have to add it back as GB has a CSS that removes this margin when it's added within the Grid Block which is:

.gb-grid-wrapper .wp-block-image {
    margin-bottom: 0;
}

coming from GB's generated stylesheet. (the default had 1em margin-bottom)

Glad you got that sorted.:D

Ah - interesting. That explains things.

Any thoughts on how to make the photo in PHONE view (only) full width? (see link to other discussion re: featured image, above)