Media code wrapping under cells on mobile

  • Resolved HelloDearBarbara

    (@hellodearbarbara)


    8 years, 10 months ago

    Tobias:

    I used TablePress for a four-column table. The first two columns go together, with the left cell of each row containing an audio link and the second cell has linked text. Likewise for the second set of two columns. This looks great on a full screen (laptop), and all four columns shrink a little on mobile. I thought it worked well until I saw that the time counter was wrapping under each cell and so there are ’00:00’s in white under each cell. It’s hard to see on a white background, but still visible. Here’s the page: https://politicalvoicetalentbeta.thomasrohe.com/political-female-voice-talent/

    I first searched for ways to remove the ’00:00′ from the audio code thinking this would shrink each cell enough that nothing would wrap. Can’t find a fix for that. Now I have split the two sets of columns thinking that they could rest side-by-side on a large screen but then would stack on mobile, with enough space for each two-column group that the audio field will not wrap.

    I’ve searched through the forums and found part of the answer for resting the two columns side-by side. But when I look at it on mobile, the two sets of columns are crookedly next to each other, slightly overlapping and the audio field is still wrapping. Here’s the page with these two sets of columns and the code I’m using:
    https://politicalvoicetalentbeta.thomasrohe.com/practice-page-2/

    Here is the CSS I’m using (not sure if pixels would be better).

    ‘.tablepress-wrapper {
    width: 40%;
    float: left;
    padding-right: 10px;
    }

    .tablepress-wrapper .tablepress-table-name {
    text-align: center;
    }’

    Here is the code I am using on the page in the text/html tab:

    ‘<div class=”tablepress-wrapper”>

    [table id=5 /]

    </div>

    <div class=”tablepress-wrapper”>

    [table id=6 /]

    </div>’

    Thank you in advance. TablePress is great and I will be donating.

    Barbara

    https://www.ads-software.com/plugins/tablepress/

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Barbara,

    thanks for your question, and sorry for the trouble.

    The reason for this simply seems to be that the timer for the player wraps to a new line.
    We will therefore basically have to instruct the browser to only show the two tables next to each other on screens that are large enough.
    (The two-table approach is definitely the better option here!)

    For that, please try this modified CSS code:

    @media screen and (min-width: 930px) {
  .tablepress-wrapper{
    width: 45%;
    float: left;
    margin-right: 10px;
  }
}
.tablepress-wrapper .tablepress-table-name{
    text-align:center
}

    Note that it should be better to place this into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress and not into the extra plugin that you seem to be using.

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Media code wrapping under cells on mobile’ is closed to new replies.