Responsive Mobile Text Alignment

  • Resolved mijstrebor

    (@mijstrebor)


    3 years, 7 months ago

    This should be easy, but I can’t make it work. I want to override any column width settings and left-justify content when my tables go mobile. I’ve got

    @media (max-width: 767px) {
    .tablepress-responsive-stack-phone tbody td {
    width: 100%;
    text-align: left;
    }
    }`

    Nothing seems to happen when I view the table on its page on my phone.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter mijstrebor

    (@mijstrebor)

    I guess I didn’t really think about it. Using

    @media (max-width: 767px) {
    .tablepress-responsive-stack-phone tbody td {
    width: 100%;
    text-align: left !important;
    }
    }`

    works just fine. I realized my oversite when I looked at devtools:

    @media (max-width: 767px)
.tablepress-responsive-stack-phone tbody td {
    display: block;
    text-align: center;
    border-top: none;
}
@media (max-width: 767px)
.tablepress-responsive-stack-phone tbody td {
    width: 100%;
    text-align: left;                        <--- strikeout
}
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    ah! Nice find! Good to hear that it’s working now!

    Best wishes,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive Mobile Text Alignment’ is closed to new replies.