Tables in responsive pages

[josh-6874]

I was expecting tables to stack in a single column in a responsive environmnent (in mobile screen, for example). However, it only shrinks the page to the given width, causing some multi-column tables to shrink to almost invisible scales. Can I change the responsive behaviour so that the tables are not only shrunken, but stacked into a single column? My other theme, Porto, does exactly that. See the private content for URL.

https://www.jmic.co.kr/dev/%EB%94%94%EC%A7%80%ED%84%B8-%EB%AF%B8%EB%8B%88-%EC%88%98%EB%B0%95-%EB%B9%84%ED%8C%8C%EA%B4%B4-%EB%8B%B9%EB%8F%84%EA%B3%84-pal-hikari-33-mini/

• This topic was modified 5 months, 1 week ago by josh-6874.
• This topic was modified 5 months, 1 week ago by josh-6874.
• This topic was modified 5 months, 1 week ago by josh-6874.

Hello,

Do you mean this https://prnt.sc/Y1nVAKzOz7ie table?

Looking forward to hearing back from you!

Kind Regards

I was referring to the main content area, product description in this case. Multiple tables are used in the content and they are not organized but shrunken in responsive screen. My other theme does not behave like such.

Hello,

Send me access to the admin panel so I can check how the description is adjusted. Also, send me some screenshots of where you see that they are shrunken on a responsive screen.

Looking forward to collaborating with you!

Kind Regards

I have two video URLs in the private section which displays two different responsive behaviours between the two themes, Porto and Woodmart. Woodmart shrinks the entire screen by width and does not alter the table content to stack up.

Hello,

May I enable the default theme and check how it works there?

Thank you in advance.

Kind Regards

Sure. Please ensure to revert to Woodmart and enable all plugins on your way out.

Hello,

As you can see, on the default theme the same issue – https://gyazo.com/5803ace21baff3dd60e2d512fdbcbcd3 so this is not something caused by our theme, it means that

The same behavior on our theme – https://prnt.sc/4gJB4b_4y9KJ, even in the visual editor that is from WooCommerce – https://prnt.sc/In9A64syVLUn

So the issue is the markup – https://prnt.sc/EgWUXO5Y6xJ9

I suggest you edit the product description via page builder and build the same design using appropriate elements from our theme – https://prnt.sc/4yGqnfNHc31q,

Let me know if you have any additional questions.

Kind Regards

Thanks for the thorough analysis on this issue.
I understand that Woodmart behaves identical to the default WordPress theme. However, I was actually comparing the responsive behaviour of Woodmart with that of another theme called Porto which is installed in our production website:
https://www.jmic.co.kr/%EB%94%94%EC%A7%80%ED%84%B8-%EB%AF%B8%EB%8B%88-%EC%88%98%EB%B0%95-%EB%B9%84%ED%8C%8C%EA%B4%B4-%EB%8B%B9%EB%8F%84%EA%B3%84-pal-hikari-33-mini/
I was expecting the same aliginment/arrangement changes for tables markups in smaller screens. Is there a way for Woodmart to behave the same as Porto theme?

Hello,

Do you have a staging site that is related to your production? https://www.jmic.co.kr/%EB%94%94%EC%A7%80%ED%84%B8-%EB%AF%B8%EB%8B%88-%EC%88%98%EB%B0%95-%EB%B9%84%ED%8C%8C%EA%B4%B4-%EB%8B%B9%EB%8F%84%EA%B3%84-pal-hikari-33-mini/

So I can investigate the markup that is defined in the product description. Or disable this https://prnt.sc/J45NHS6TbeqS protection so I can check it via the dev tools.

Kind Regards

The security plugin has been disabled. Thanks for the investigation.

Hello,

Define the code below in Theme Settings -> Custom CSS -> Global custom CSS:

@media screen and (max-width: 990px) {
    .woocommerce-Tabs-panel--description table tbody tr td {
        width: 100%;
        display: block;
        text-align: center;
        border-bottom: none;
        
        border: 1px solid lightgray;
    }
    
    .woocommerce-Tabs-panel--description table tbody tr td a {
        width: 100%;
    }
    
    
}

Clear the cache and recheck your issue.

Kind Regards

The tables are now behaving as expected. Thank you so much.

Hello,

You are welcome. Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts