Button element not stacking under Image element

[igoemkoester]

I’m trying to build a page that has a photo and then a “Download” button under the photo. I used the Image element to add the photo, but when I add a Button element to the page, it shows up on the same line as the photo. I want it to show underneath the photo.

Is this the intended behavior of the Button element, or have I maybe done something wrong?

I tried the CSS fix mentioned here, but that caused the button to be left-aligned on the page (I need it to be centered). I also tried adding a Gap element as mentioned here, and that worked, but it seems like a strange workaround.

If I need to use the Gap element, that’s fine, but I just wanted to make sure I’m not doing something wrong before I start using the Gap throughout my website.

[nabeel]

Hi Matthew,

Thank you for reaching out to us. Instead of adding a Gap element or giving margin to center-align a button, simply go to the column settings in Cornerstone, under Formatting select align center option (see screenshot)

This will center align your content in that column. Hope this helps!

[igoemkoester]

Hi Nabeel – thank you for the response. I tried that, but it still isn’t working like I hoped. Here’s a picture showing the example page. You can see that I’ve set the column to center align. I want the button to be centered under the image, not to the side of it, but I’m unable to drag the button underneath the image.

[rad]

Hi Matthew,

Hmm, if that’s the case, you shouldn’t add them on same rows. Please add that button on the next row’s column under it. Or are you trying to overlay it? If yes, still the same, add it on next row and make the row’s top margin to negative.

Thanks!

[igoemkoester]

Hi Rad – thank you. I just want the button to go under the image, not overlay it.

Is there no way to just drag a Button element under a Picture element when they’re in the same row and column? Adding a new row for every button seems like a lot of trouble. I’ll plan to use the Gap element as mentioned earlier, but I’d just like to ask one more time: is this really the default behavior of the Button element, or have I done something wrong?

[ruenel]

Hello Matthew,

Adding a negative margin will make the button go behind the image. What you could do is insert a custom my-button class in your button settings and then you can use this custom css:

.my-button {
  position: absolute;
  top: 0;
  left: auto;
  z-index: 0;
}

We would loved to know if this has work for you. Thank you.

[igoemkoester]

Hi Rue–I’m sorry, I realized I was being unclear. I don’t want the button to go “in back of” or “behind” the Image element. I want it to go “beneath” or “below” the image. I’ve attached a mockup showing what I’m trying to achieve. Is this possible without needing to use a Gap element between the Image and Button elements?

[thai]

Hi @igoemkoester,

Please add this element CSS to the column contains the image & button:

$el {
  display: flex !important;
  flex-direction: column;
}

Hope it helps

[igoemkoester]

Hi Thai–thank you for that code. It worked to move the button below the image, but it caused the button width to stretch out across the whole page. I did some experimentation and found that adding align-items: center; to your code fixed this problem. This is the final code I ended up using on the column:

$el {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

I figured I’d post it here in case anyone else can benefit from it.

Thank you again for your help.

[nabeel]

Hey Matthew,

You’re right, align-items property specifies the default alignment for items inside the flexible container. Here’s a great article to follow to learn more about Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thank you for sharing the solution with us. Cheers!