Place a button always right bottom

[Marine]

Hello,

I have several pages for my associations, built with the same template. In the block “Chiffres clés” on the right of the association logo, I’like :
– that the grey block is the same height as the logo
– to position the call to action button always at the bottom right of the grey block, independently from the text size.
All this must be responsive (before, I’ve added a height to the grey block but I guess it’s not the right solution), the button should always be inside the grey block, on a tablet portrait, my grey block may be bigger than the logo. Can you help? I add some print screen (1 = today, 2 = required)
Thanks a lot guys!
Nice day
Marine

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Please add an extra class to the grey box so I can provide you with some custom css

– Kyle

[Marine]

Done, it’s .chiffres

[Kyle – SUPPORT]

Add this to your custom css:

.chiffres .sf-button {
  margin: 0;
  position: absolute;
  right: 0;
  bottom: 0;
}
.chiffres .box-content-wrap {
  position: relative;
}

– Kyle

[Marine]

OK thanks it works to have the button at the right place, tx. But to have the grey block with the same height as the logo area on the left, do I have to set up a fix height to my grey block? Height I’ll have to adapt for each device. Or is there another solution?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add this to your custom css:

.chiffres .box-content-wrap {
  min-height: 330px;
}

Normally you would change it for different screen sizes, but on the next screen size down the content fills the box but so you can’t change the box height, but the image is not as tall as the box

– Kyle

[Marine]

Great Tx Kyle !

[Rui Guerreiro – SUPPORT]

No problem. Thanks Kyle
-Rui

[Kyle – SUPPORT]

No problem

[Marine]

Hey,

when I check your solution on a mobile, the button covers the text end. I don’t understand why because it’s a min-height.
Could you help? http://www.abracamundi.com/associations/bloom/
Tx guys !!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Adjust the min height for mobile:

@media only screen and (max-width: 767px) {
.chiffres .box-content-wrap {
    min-height: 640px;
}
}

Thanks.

[Marine]

Tx ! I have to read again my css guide, cause I thought that min-height was really minimum height, so if the bock needs more space in height on mobile, he can do it…

[David Martin – Support]

Great glad that helped you out.

Thanks.