Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 19, 2015 at 3:31 pm #430891
    DunesResort

    I searched the forum and surprisingly not seen anyone else having issues with this.

    I’ve created a table to show the cost of rooms over several different months and days of the week using the Avia Layout Builder table content element.

    I have a descriptive column as the first column at left with prices in columns to the right. The table rows in the descriptive column change height depending on the width of the screen because there is text involved and it uses a greater deal of space. The pricing table rows remain the same height as there’s just one number. I need the pricing table rows to be the exact same height as the descriptive rows or else the prices will invariably not be lined up with the room associated with the price.

    Please see a link to the page with the table I’m creating. I tried using a period to increase the height of a couple of rows but that only worked for one width.

    Thanks for letting me know what I’m doing wrong. I can’t imagine this is how the table works.

    April 19, 2015 at 7:17 pm #430917
    DunesResort

    I am adding to this ticket because I just realized that the first descriptive column of this table disappears in devices with smaller viewports. What?! Thanks for your help.

    April 19, 2015 at 11:20 pm #431001
    DunesResort

    Also having the same issue as ticket #430195 – Ismael told them to “Please edit the theme’s table element. Set the table purpose to tabular and the responsive styling to scrollable.” How do you do that?

    Thanks.

    April 20, 2015 at 8:48 pm #431591
    Elliott

    Hey!

    You have some empty elements in your table so I don’t think it’s going to be able to work like that. Perhaps you could do something like this, https://kriesi.at/support/topic/bug-table-headers-applied-incorrectly-on-media-query/#post-387990.

    If you want to display the first column then add this to your custom CSS.

    @media only screen and (max-width: 767px)
.responsive .pricing-table.avia-desc-col {
  display: block !important;
}

    Regards,
    Elliott

    April 21, 2015 at 6:37 pm #432255
    DunesResort

    Hi Elliott!
    Thanks for your help. I tried both the bug fix you provided me a link to and the @media addition to my enfold-child custom css. Neither is working.

    Perhaps my first issue wasn’t clear. The rows don’t line-up at all horizontally except when the cells are all the same size. The table is not acting responsively. On smaller viewports, the prices no longer line up with the room description. I’ve never seen a table work this way before. Usually the cells are lined up horizontally as well as vertically. Not the case here.

    As to the issue of not showing the room descriptions under 767px viewport, I tried the @media fix and it’s not working. Any other suggestions?

    Thanks again.

    April 22, 2015 at 11:32 am #432703
    Ismael

    Hi!

    The rows don’t line up because the content of the heading rows are not consistent. The last two columns’s heading row occupies two lines. You can set a minimum height for the heading row then decrease the size of the default rows:

    @media only screen and (max-width: 1024px) {
li.avia-heading-row {
  min-height: 55px;
  font-size: 13px;
  line-height: 18px;
}

ul.pricing-table li {
  font-size: 15px;
}}

    Best regards,
    Ismael

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