Home Forums WoodMart support forum Regarding responsive Horizontally Table content in Mobile view

Regarding responsive Horizontally Table content in Mobile view

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #713400

    weeglypvtltd
    Participant

    Respected,
    I was try both Table widget which are available in Gutenberg Plugin.
    I am adding my particular product page link in private section please look.
    I want like this which you show in your website demo: https://woodmart.xtemos.com/table/
    [Particular mobile responsive size or more lower then that. ]
    I want to make my table content Horizontally scroll.
    Please give me all possible solution with step by step guide. If any video available then please send me a link.

    Waiting for your response.

    #713518

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please use the custom table gutenberg widget in the product page and set the style and other table settings accordingly.

    Add the table in the single prodcut page layout:
    https://xtemos.com/docs-topic/single-product-page-builder/

    Then if you are not able to set the table responsive, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

    #713520

    weeglypvtltd
    Participant

    I will already share my product page url in previous message. Where I was use both table. Please look once and check brother. How could you reply without check my URL!

    #713522

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I have checked the URL but I need your site logins to check the issue.

    Best Regards.

    #713523

    weeglypvtltd
    Participant

    Here is my details. Please check as soon as possible.
    After that please write all process step by step. So, I will understand easily.
    Waiting for your response.

    #713614

    Artem Temos
    Keymaster
    Xtemos team

    Hello,

    You are using the standard Gutenberg table, but need to use our theme’s custom table instead. Check the following screenshot

    Kind Regards

    #713619

    weeglypvtltd
    Participant

    I kindly request to you please read my all message before sending message and lose time for both of us.
    I was use both table, Please check my same page again and look.
    Same problem in both table. I was already use theme’s custom table as well, but same issue.
    Please give me solution as soon as possible.
    Look at my screenshot as well.
    You already have my access. So, You can check directly as well.

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

    Artem Temos
    Keymaster
    Xtemos team

    Hello,

    Sorry, I didn’t notice that you are using our theme’s table already. As we can see, it works correctly. And if you add more columns to the table, you will see the horizontal scroll as on our demo.

    Kind Regards

    #713629

    weeglypvtltd
    Participant

    No, It’s not working in mobile view.
    Please look screenshot.
    Please send me little video or screenshot where you check and working properly.
    Waiting for your response.

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

    Artem Temos
    Keymaster
    Xtemos team

    Hello,

    Could you please clarify what exactly is wrong in your screenshot? You have all three columns visible. If there were more columns (5-7), you would see the horizontal scroll.

    Kind Regards

    #713647

    weeglypvtltd
    Participant

    Look at this screenshot, I have assign as red mark: Those words are single word
    Like: Parametro, REC-150H, Personalizzazione etc. many other words as well.

    If those important long words are break in responsive style that’s not easy to customer read and understand. Specially when you sell some high price value product with very hard to understand technology of my particular products.

    Please give me some easy solution.

    Waiting for your reply.

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

    Artem Temos
    Keymaster
    Xtemos team

    Hello,

    Words in the table are breaking because the word-break: break-word property is applied to them:
    https://monosnap.ai/file/MP9XmOyK4aj2XYYvSTjIuBVpUACAEJ

    This property is applied to the table for two different reasons:

    1. The Fixed width table cells option is enabled in the table, which applies break-word to the table text:
    https://monosnap.ai/file/R7h5t9taGYml76C0QlSbasXatAAlyZ

    2. Both of the tables is placed inside a Column element, which applies break-word to all of its content:
    https://monosnap.ai/file/oaiRw8fyF89cx7iu1vSuPxJvjiq7Qm

    To resolve this issue, make sure both of the following conditions are met when displaying the table on the page:

    The Fixed width table cells option is disabled
    The table is not placed inside a Column block or any other wrapper block that applies the break-word property

    Kind Regards

    #713734

    weeglypvtltd
    Participant

    I was try everything as per your suggestion but still didn’t work.
    Please check once again because I cant find break-word option in my column setting.
    Please check again .

    #713773

    Serg Sokhatskyi
    Keymaster
    Xtemos team

    As we mentioned in our previous response, to prevent words from breaking in your table, you need to take two steps:

    1. Go to the table settings and disable the Fixed width table cells option.
    2. Place the table block so that it is not inside a Column block. This includes the product description and the product layout.

    We checked your product description and layout settings but did not see the requested changes. The option in the table remains enabled (https://monosnap.ai/file/FVtfw0Y2RYuvnOep22MOxUcVCtDTz7), and the table itself is still located within one of the Column blocks (https://monosnap.ai/file/AfSS8hIYRfTjjB31yGg0FgloXWeUm9). Additionally, the entire product description section at the layout level is placed inside a columns block (https://monosnap.ai/file/hISQlfsVHTAgluRa2jZgxIzFfRh06I).

    It is important to note that the column block does not have a specific word-break setting you can toggle; these properties are simply present in its styles as part of the standard WordPress CSS. Without the described changes, the word-break: break-word property will continue to function, causing the words to wrap.

    To resolve this, you need to disable “Fixed width table cells” in your tables and replace all Column blocks containing the table with Containers. But if for some reason you prefer to keep the columns, you can add the following custom code to the Global Custom CSS Area in Theme Settings:

    .wd .wp-block-column {
    	word-break: unset;
    }

    This code will disable the word-break property inherited from the columns. In that case, you will only need to turn off the Fixed width table cells option in your tables.

    Kind Regards

    #713777

    weeglypvtltd
    Participant

    Thank you so much. Now it’s working.
    Thanks for your support.

    #713796

    Artem Temos
    Keymaster
    Xtemos team

    You are always welcome. Feel free to contact us if you have any further questions.

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Regarding responsive Horizontally Table content in Mobile view’ is closed to new replies.