|
|
As a workaround its possible to activate "Use custom grid" in the Visual CMS module "Frond end" settings. The column prefix could be "col-sm-" and the offset prefix "offset-sm-". After that you may need to add classes for different devices in the widget settings in the tab "Layout settings". Like col-12 for mobile devices. |
|
|
The workaround does not solve the whole problem. I found a situation when I cannot use different numbers of columns for mobile and desktop screen resolution because when I set columns via drag and drop editor (e.g. 6 cols) I cannot add settings for different screen resolution (classes added in widget settings were added inside the widget, not in root widget selector). See attached pictures for details. Additionally cannot set odd number of columns for widget (allowed: 2,4,6,8,10,12). vcms01.png (9,636 bytes) vcms02.png (15,807 bytes) vcms03.png (20,932 bytes) vcms_settings.png (27,244 bytes) |
|
|
We found some pretty nice workaround for this issue. We created custom .scss file which creates columns and offsets classes with bootstrap 3 names, then set these classes to extend just col-* or offset-*. Here is example of our bootstrap3_support.scss file: $breakpoints: "xs", "sm", "md", "lg"; @each $breakpoint in $breakpoints { /* * creating classes with bs3 col names e.g. * col-xs-12 and extending here just bs4 col-12 */ @for $i from 1 through 12 { .col-#{$breakpoint}-#{$i} { @if ($breakpoint == "xs") { @extend .col-#{$i}; } @else { @extend .col-#{$breakpoint}-#{$i}; } } } /* * creating offset classes with bs3 offset name e.g. * col-xs-offset-4 and extending here just bs4 offset-4 */ @for $i from 1 through 11 { .col-#{$breakpoint}-offset-#{$i} { @if($breakpoint == "xs") { @extend .offset-#{$i}; } @else { @extend .offset-#{$breakpoint}-#{$i}; } } } } Then you have to make sure that in visual CMS module settings "use custom grid layout" is DISABLED, and additionally option "Deactivate Bootstrap import via this module" is disabled too. With these changes now you can use VisualCms normally and columns and offsets are set properly :) |
|
|
Fixed in recent versions of wave. Current theme is Apex without those issues anyway. |
- Anonymous
