ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• June 13, 2016 at 2:53 pm #274298
  Marine

  Member

  Post count: 151

  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.
  June 14, 2016 at 12:23 pm #274594
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

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

  – Kyle

  June 17, 2016 at 10:27 am #275426
  Marine

  Member

  Post count: 151

  Done, it’s .chiffres

  June 17, 2016 at 10:40 am #275439
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

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

  – Kyle

  June 17, 2016 at 10:53 am #275449
  Marine

  Member

  Post count: 151

  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.
  June 17, 2016 at 11:04 am #275455
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  June 17, 2016 at 11:44 am #275477
  Marine

  Member

  Post count: 151

  Great Tx Kyle !

  June 17, 2016 at 11:47 am #275480
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  No problem. Thanks Kyle
  -Rui

  June 17, 2016 at 11:54 am #275483
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem

  June 30, 2016 at 5:04 pm #278467
  Marine

  Member

  Post count: 151

  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.
  July 1, 2016 at 5:17 pm #278723
  David Martin – Support

  Moderator

  Post count: 20834

  Adjust the min height for mobile:

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

  Thanks.

  July 4, 2016 at 10:15 am #278905
  Marine

  Member

  Post count: 151

  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…

  July 4, 2016 at 10:17 am #278907
  David Martin – Support

  Moderator

  Post count: 20834

  Great glad that helped you out.

  Thanks.

• Back to forum

  Posted in: Dante