Mobile view - table element

Home Forums Jevelin Theme Mobile view – table element

Home Forums Jevelin Theme Mobile view – table element

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • rene
    Participant

    Hello,

     

    I am not able to make tables to be fully visible in a mobile view. I tried to adjust mobile padding options but it didn’t work. How can I make the whole table to be visible in a mobile view (without user scrolling to the right)?

     

    Please see screen shots for reference.

    Thank you in advance!

     

    Attachments:
    You must be logged in to view attached files.

    Shufflehound
    Moderator

    Hi there,

     

    Can you please give us a link to this website page, so we can take a look? (you can post it in private field)

     

    Best regards,

    Shufflehound team

    rene
    Participant

    Hi,

     

    Thanks for reply.

    Please see information on the private field.

     

     

    Your password for the shared page is not working for me so please make sure it is working by testing it yourself.

    rene
    Participant

     

     

     

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .fw-table > table > thead > tr > th,
    .fw-table > table > tbody > tr > th,
    .fw-table > table > tfoot > tr > th,
    .fw-table > table > thead > tr > td,
    .fw-table > table > tbody > tr > td,
    .fw-table > table > tfoot > tr > td {
        white-space: normal;
    }

    rene
    Participant

    Hi,

     

    I tried to add the custom CSS code above to the theme settings but it seems not to be working. In the theme settings there is already a custom code used regarding tables (as there was a problem with them before > https://support.shufflehound.com/forums/topic/unable-to-remove-an-extra-3rd-column-in-tables/).

     

    Could that earlier code have affect to this new one? Here is how the codes are currently inserted in the CSS code field:

    .page-id-1595 .sh-table-element tr td.default-col:last-child {
    display: none;
    }
    .fw-table > table > thead > tr > th,
    .fw-table > table > tbody > tr > th,
    .fw-table > table > tfoot > tr > th,
    .fw-table > table > thead > tr > td,
    .fw-table > table > tbody > tr > td,
    .fw-table > table > tfoot > tr > td {
    white-space: normal;
    }

     

     

    Thank you in advance!

     

    It seems facing CSS specificity issue so please try changing above shared CSS code with the following modified code.

     

    .fw-table > table > thead > tr > th,
    .fw-table > table > tbody > tr > th,
    .fw-table > table > tfoot > tr > th,
    .fw-table > table > thead > tr > td,
    .fw-table > table > tbody > tr > td,
    .fw-table > table > tfoot > tr > td {
        white-space: normal !important;
    }
Viewing 8 posts - 1 through 8 (of 8 total)