Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 16, 2025 at 9:46 am #1488126
    95mc

    Hi!

    Hi, I’d like the space between table lines on desktop and mobile to be the same. Attached is an image of the desktop and tablet. I added this, and it’s reduced, but I can’t get it to match.

    @media only screen and (max-width: 767px) {
    .avia-data-table.avia_pricing_minimal td, .avia-data-table.avia_pricing_minimal th {
    padding: 0px;
    }

    On some screen sizes, the table gets messed up, even leaving out the image. I’ve attached images.

    Could you help me?

    Sorry about the SSL I´m checking.

    BR,

    Antonio.

    August 18, 2025 at 3:52 pm #1488185
    Rikard

    Hey Antonio,

    Thanks for the screenshots. Please assign a class to the column where you put text on the right, otherwise it’s difficult to target the correct elements with CSS.

    Best regards,
    Rikard

    August 19, 2025 at 11:09 am #1488244
    95mc

    Hi RIkard,

    I have assigned a class colum_tabla for the left column and colum_plano for the right.
    Many thanks,

    BR,

    Antonio.

    August 19, 2025 at 7:14 pm #1488266
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1270px) {
#colum_tabla td.avia-highlight-col {
  width: 130px;
}
}

    Best regards,
    Rikard

    August 19, 2025 at 11:11 pm #1488273
    95mc

    Hi Rikard,

    Works perfect, many thanks.
    Could you help me with the space between table lines on mobile? I achtatted images in the first post.
    Thanks,

    BR,

    Antonio.

    August 20, 2025 at 9:07 am #1488288
    Rikard

    Hi,

    Try this CSS as well:

    
@media only screen and (max-width: 900px) {
#colum_tabla td.avia-highlight-col {
  width: 110px;
}
#colum_tabla td {
  font-size: 15px;
}
}

    Best regards,
    Rikard

    August 20, 2025 at 11:02 am #1488296
    95mc

    Hi Rikard,

    Sorry it is about the space between lines in the tablet in mobile. See the attach the images; one is the line space now in mobile and the other the line space I would like.
    I try this:

    @media only screen and (max-width: 767px) {
    .avia-data-table.avia_pricing_minimal td, .avia-data-table.avia_pricing_minimal th {
    padding: 0px;
    }

    But the line space keep be big.

    Thanks advance,

    BR,

    Antonio.

    August 21, 2025 at 11:09 am #1488349
    Guenni007

    i did not check your selectors if they are correct but in your media query 

    @media only screen and (max-width: 767px) {
  .avia-data-table.avia_pricing_minimal td, 
  .avia-data-table.avia_pricing_minimal th {
  padding: 0px;
  }
} /* === here is one missing curly bracket === */

    do not forget the closing bracket ( two opening brackets – only one closing )

    ___________

    Next : if you got a pricing-table – there are no table layouts (body, th, td etc) these are created as lists!
    so if you got a pricing table – then the selectors are not o.k.

    PS: i didn’t know that even minimal data tables – got that class: avia_pricing_minimal
    so with that one missing closing bracket your codes seems to working.

    August 21, 2025 at 11:45 am #1488351
    95mc

    Hi Guenni,

    Many thanks, I have add the brakes but the space between lines in mobile keep the same. In computer is correct but in the mobile version is bigger.
    Could you help me?

    BR,

    Antonio.

    August 21, 2025 at 3:34 pm #1488362
    Guenni007

    As a participant i could not see private content.

    August 21, 2025 at 7:23 pm #1488382
    95mc

    Hi Guenni,

    Here I send you the image with the space between table lines on mobile now and the space I would like.
    I don´t know why in the mobile version the space is bigger.
    Captura-de-pantalla-2025-08-16-a-las-9-28-49
    Captura-de-pantalla-2025-08-16-a-las-9-29-12

    Many Thanks,

    BR,

    Antonio

    August 22, 2025 at 12:12 pm #1488402
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
.avia-data-table.avia_pricing_minimal td, .avia-data-table.avia_pricing_minimal th {
    padding: 0;
}
}

    Best regards,
    Rikard

    September 4, 2025 at 12:13 pm #1488933
    95mc

    Hi Ricard,

    Works perfect! Many thanks.

    BR,

    Antonio.

    September 4, 2025 at 7:27 pm #1488947
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Change the space between table lines on mobile.’ is closed to new replies.