Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 24, 2020 at 10:14 pm #1225359
    BrendanG

    We have a page that has tables inside a Tabs element. It looks fine on desktop but on mobile devices the images in the tables disappear and the text gets compacted into tall, thin columns.

    Any suggestion on how I could get the table looking better on mobile devices?

    June 26, 2020 at 2:26 pm #1225826
    Victoria

    Hey BrendanG,

    Please define “better looking”. You can have tables stay as they are, and make them scrollable.

    Best regards,
    Victoria

    June 27, 2020 at 12:33 am #1226005
    BrendanG

    Hi Victoria, since the table contains image/text pairs would it be possible to have each pair take up the full width of the display on a mobile device?

    Brendan

    June 29, 2020 at 1:56 am #1226262
    Nikko

    Hi BrendanG,

    Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
  #top .av_tab_section .tab_inner_content table td {
    display: block;
    width: 100% !important;
    height: auto !important;
    border: 1px solid #e1e1e1;
    margin-bottom: -1px;
  }
}

    Best regards,
    Nikko

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