[Resolved] Setting the grid for different viewport
This support ticket is created 3 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
Hello and thank you for contacting the Toolset support.
Please check the documentation of the Bootstrap 4 grid system on this page hidden link
Basically, letters are bound to the screen sizes, and the grid is based on 12 columns:
- col-xs-* are for extra small screens.
- col-sm-* are for small screens.
- col-md-* are for medium screens.
- col-lg-* are for large screens.
- col-xl-* are for extra large screens.
The following example will hold 4 columns for large(3 columns or each one) screens and 2 columns for small screens(6 columns on each one):
My apologies, I did not understand what you want in the first message.
You can change the number of columns for Desktop/Tablet/Mobile in the View loop block settings. Check this screenshot hidden link
You can set a different number for each screen.
I hope this helps. Let me know if you have any questions.
The breakpoints are configurable in Toolset->Settings->General(tab)->Responsive web design breakpoints for Toolset Blocks at the bottom of the page. Check this screenshot hidden link
I got a problem when setting up the content template on a different viewport, refer to the screenshot, when I select the tablet viewport, everything looks ok, but when I select the desktop viewport, the image in the Toolset Image slider enlarge and I can't scroll to the right and do the configuration, do you have any suggestion?
I think that you are encountering an already reported issue where the Slider block overflows the whole page. This happens when the "Adjust Editor Maximum Width" Toolset setting is activated. Check this animation hidden link
I'll suggest that you switch to tablet view in order to get the right sidebar, click on the Toolset icon at the top right, deactivate the setting. Then switch back to the desktop view and continue building your page. Check this screenshot hidden link
If this does not work as expected, I'll need to take a copy of your website for some local debugging. Let me know if that's fine with you.