Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 5, 2018 at 11:42 am #893685
    Miki

    Hi,
    I have made som pricing tables. But the horizontal cells in the Description column and the text column cells are not always the same size because of the content and screen size. Therefore the whole table get messed up on some devices. How can I make sure that all the horizontal cells are always of equal hight?

    January 6, 2018 at 4:36 pm #894116
    Victoria

    Hey mastermcc,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.main_color .pricing-table>li {
  min-height: 85px;
  word-wrap: break-word;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .pricing-table li.avia-pricing-row {
    font-size: 36px;
  }
  .main_color .pricing-table>li {
    padding: 9px 9px;
  }
  .pricing-table>li.avia-heading-row {
        padding: 9px 2px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 8, 2018 at 1:06 pm #894692
    Miki

    Hi Victoria, thanks for your reply.

    It seems to work for “the text column” but not for the “Description column”. The horizontal lines in the “Description Column” (the first column) do not adjust correctly to the “Text Column”, when i change browser size.

    I put in this code:

    .main_color .pricing-table>li
    {
    min-height: 85px;
    word-wrap: break-word;
    }

    @media only screen and (min-width: 768px) and (max-width: 1023px)
    {
    .pricing-table li.avia-pricing-row {font-size: 36px;}
    .main_color .pricing-table >li {padding: 9px 9px;}
    .pricing-table>li.avia-heading-row {padding: 9px 2px;}
    }

    Thanks in advance for your help!

    January 11, 2018 at 5:50 am #895981
    Ismael

    Hi,

    Are you referring to the “Timepraiser” table? Try to decrease the font size of the description column. Insert the following css code inside the css media query.

    .avia-desc-col li {
    font-size: 15px;
}

    Best regards,
    Ismael

    January 11, 2018 at 11:01 am #896091
    Miki

    Hi Ismael,

    Thanks for your reply. However the code did not fix it. It made the text smaller, but not the cells. They are still not aligned when the browser width change. I have attached an image where you can see the dotted lines in the first column do not match the other two columns.

    Best regards

    Miki

    January 13, 2018 at 3:44 am #896784
    Ismael

    Hi,

    You have to decrease the font size even more until there’s only two lines of text.

    .avia-desc-col li {
    font-size: 12px;
}

    Default font size value is 15px that’s why you’re not seeing any changes.

    Best regards,
    Ismael

    January 15, 2018 at 12:41 pm #897492
    Miki

    Hi Ismael,

    But eventhough it is 12px, it still does not align properly when I change browser size. Would it not be possible/easier to make the cells align to each other?

    Best regards

    Miki

    January 16, 2018 at 2:26 am #897804
    Ismael

    Hi,

    The cells are aligning properly once the font size is set to 12px.

    // https://imgur.com/a/7jIBy

    Best regards,
    Ismael

    January 17, 2018 at 11:11 pm #898745
    Miki

    Hi Ismael,

    Sorry for being super annoying, but I have set the font size to 12px and mine looks like the image I have attached. Stil not aligning.

    best regards

    Miki

    January 18, 2018 at 11:57 am #899062
    Victoria

    Hi Miki,

    With this html layout it’s very hard to make sure the cells align at all times. You can make media queries to target most size adjusting padding of the cells.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.