Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 12, 2023 at 2:47 pm #1407244
    Sachs

    Hey Enfold Support’

    I’m trying to edit the table, but when adding the table header (css code from documentation), the whole layout, webdesign changes. Please could you help med out?

    Table header
    Should be background color: #f8f9f9

    Used this css from your documentation
    #top .avia-table th {
    background: #f8f9f9;
    color: #17494d;
    }

    The table rows background colour should change accordingly
    Header background: #f8f9f9
    Row background: #fcfcfc
    Row background: #f8f9f9
    etc.

    Please could you help med with the CSS?

    Many thanks & Best regards
    Lene

    May 14, 2023 at 12:58 am #1407332
    Nikko

    Hi Lene,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    #top .avia-table td {
    background-color: transparent;
}

#top .avia-table tr {
    background-color: #fcfcfc;
}

#top .avia-table tr:nth-child(odd) {
    background-color: #f8f9f9;
}

    Best regards,
    Nikko

    May 24, 2023 at 11:55 am #1408406
    Sachs
    This reply has been marked as private.
    May 24, 2023 at 4:28 pm #1408449
    Nikko

    Hi Lene,

    Please try to add this CSS code as well:

    @media only screen and (max-width:767px) {
  #top .avia-table td {
    max-width: 140px;
    white-space: break-spaces;
  }

  #top .avia-table td strong {
    white-space: break-spaces;
  }
}

    Best regards,
    Nikko

    May 25, 2023 at 10:47 am #1408511
    Sachs
    This reply has been marked as private.
    May 26, 2023 at 5:24 am #1408624
    Nikko

    Hi Lene,

    I apologize for my mistake, please remove the code I gave you and replace it with:

    @media only screen and (min-width:1024px) {
  .page-id-961 #av_section_3 .avia-table tr > td:nth-child(even) {
    width: 150px;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    May 26, 2023 at 2:12 pm #1408678
    Sachs
    This reply has been marked as private.
    May 27, 2023 at 2:51 am #1408733
    Nikko

    Hi Lene,

    Please replace the code I gave with this one:

    @media only screen and (min-width:1024px) {
  .page-id-961 #av_section_3 .avia-table tr > td:nth-child(2) {
    width: 230px;
  }

  .page-id-961 #av_section_3 .avia-table tr > td:nth-child(4) {
    width: 130px;
  }
}

    Hope it helps and have a great weekend :)

    Best regards,
    Nikko

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