Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 17, 2017 at 10:34 am #889759
    SuperSportsUAE

    Hi,
    I’m using a 2 column table within a text block to create a page of coach bio’s. In the second column I’m using bullets to list the various informational points, which is all well & good until the screen size sets up for a mobile, then it gets weird!

    I’ve searched the forum but can’t find anything that helps.

    This page http://www.supersportsuae.com/swimming-lessons-super-sports-academy/swim-instructor-biographies/

    Thanks

    December 17, 2017 at 11:36 pm #889854
    Mike

    Hey SuperSportsUAE,
    Oddly there was no rule for text alignment at mobile, so the browser was choosing center, Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
li {text-align: left !important;}
}

    Best regards,
    Mike

    December 18, 2017 at 6:25 am #889918
    SuperSportsUAE

    Thanks Mike, but will that not affect all tables in mobile view?

    I’ve noticed this piece of CSS

    #mobile {
    display: block !important;
    }

    tbody td {
    display: table-cell !important;
    text-align: center !important;
    }
    }

    So I decided to add a table ID to that particular table and removed the style details from the html (worked it out after some digging on W3, CSS Tricks & Stack Overflow)

    <table id=”coach_bio”>
    <tbody>
    <tr>
    <td style=”width: 10%; text-align: center;”>

    @media only screen and (max-width: 767px) {
    table#coach_bio {
    width: 100%;
    li {text-align: left !important;}
    }
    }

    Which seems to have done the trick. However, I’m asking myself whether it wouldn’t be better to turn the table into blocks, so I have a name & photo with the data beneath it, rather than side by side? Is that possible for specific tables using this configuration?

    Thanks

    December 18, 2017 at 6:34 am #889919
    SuperSportsUAE

    Actually, looking at it again, I think it was right aligned and now it’s centre aligned! However, it is now legible!

    The left column is centre aligned, but the right column should be left aligned. In the html it is, but should I also be dictating this style in the CSS, and not the html?

    The full CSS that I discovered is:

    @media only screen and (max-width:767px) {
    #top.page-id-13 #wrap_all .av_one_full {
    padding: 20px !important;
    }

    #fullscreen_slider_0 {
    display: none;
    }

    #mobile {
    display: block !important;
    }

    tbody td {
    display: table-cell !important;
    text-align: center !important;
    }
    }

    Which, if I recall correctly was to sort out the alignment of some buttons & tool-tips within a table, so maybe I should add a table id to that one as well? Or does this “#top.page-id-13” do that already?

    I suspect that may be over-riding what I’ve just added, since it appears above it in the CSS?

    Thanks

    December 21, 2017 at 4:49 am #890983
    Mike

    Hi,
    #top.page-id-13 should work fine.
    It seems your page is working correctly now, are you happy with these changes?

    Best regards,
    Mike

    December 21, 2017 at 6:58 am #891028
    SuperSportsUAE

    Thanks Mike, meant to get back to you, been v.busy and slipped through the net! All sorted now. Thanks for your assistance.

    December 21, 2017 at 11:26 am #891088
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘bullet points within table cell incorrectly positioned on mobile’ is closed to new replies.