Display Size Guide in its entirety on mobile

When I was testing the Size Guide function, I found that the Size Guide can be displayed completely on the computer, but when the page is shrunk to the mobile, the Size Guide can not be displayed completely, and I need to move left and right in order to see the other columns, may I know how to set it to see all the columns without moving left and right on the mobile?

https://drive.google.com/file/d/1MV4ddebEQXPF04O2hyN8Wwpu2dvYI-47/view?usp=sharing
This is a video of my test

Hello,

Sorry to hear about the inconvenience. Kindly, 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

I’ve filled in the information you need. I have another question, in your Size Guide feature, the Html Block of the Size Guide has some space from the screen, how can I set it to show the full width on my mobile?

Is there a Tab option for components in your WPBakery page editor that prevents Size Guide content? When I was testing it seems that only Nested Carousel can be put into Size Guide, but this feature is missing the Tab function to toggle the Size Guide title!

Attachments:

You must be logged in to view attached files.

Hello,

This is only with the custom CSS code. Please add the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Mobile CSS section:

table.wd-sizeguide-table tbody tr td {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
}
}
.wd-sizeguide-table tr:first-child td {
    font-size: 10px;
}
.single-product div#my_popup {
    padding-left: 10px;
    padding-right: 10px;
}

Best Regards.

I used your CSS code and now there is no gap between the Size Table and the popup, but there is still a gap between the popup and the sides of the mobile screen.
There is another question, your CSS code is to adjust the font size of the Size Guide to show the entire Size Guide can be displayed on the screen, while I want to achieve the effect is regardless of the size of the text inside the Size Guide, can be the entire Size Guide Table content display without the need for left and right slide.
The effect is similar to a picture being scaled down in equal proportions.

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, it is not feasible to implement the size guide on mobile devices without utilizing custom CSS code or modifying the font size. The available space on mobile screens does not allow for adjustments to the size guide table without scroll.

Best Regards.

I am using the Carousel function to switch the Size Guide, is there a Tab function that can also set the effect of switching the Size Guide? There is no title for Carousel, or is there a way to add a title for Carousel?

Hello,

Yes, you can show the size guide in the tabs as well. Each product page has the option of the Additional tab: https://xtemos.com/docs-topic/product-page-options/#local_settings

You can create an HTML block with a Size Guide element and add into this tab: https://xtemos.com/docs/woodmart/html-blocks-2/#custom_tab

Best Regards.

I mean WPBakery’s TAB Element feature

Hello,

Navigate to Products > Edit Product > On the edit product page, check the Product Settings > Tabs tab and create a custom tab for each product separately: https://ibb.co/z53zhnm. Use the tab element.

Best Regards

When I adjust the Size Guide popup button, I can see that there is no gap between the two sides of the popup when I change the Padding parameter on the computer side, but how do I apply it to the custom CSS code of the theme?

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the product page URL so I can check and give you a possible solution?

Best Regards

Any product URL with a Size Guide popup button

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-sizeguide-content {
    margin: 15px; 
    padding: 10px; 
}

Best Regards

Added the CSS code you sent me, but it didn’t work!

Hello,

Please revisit your site and verify the issue. The CSS is now functioning correctly.

Best Regards

What I’m trying to achieve is the effect of the first image below, but after using your code it’s the effect of the second image below

https://ibb.co/1bqJ8Dv
https://ibb.co/zhr0TDT

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings > Custom CSS > Mobile CSS section:

.mfp-bg.mfp-ready,.mfp-container {
    padding: 0 0px !important
}

Best Regards

[Author]

Posts