This is a block element with a two column structure.One of the columns has an image, and in the other, the user can add content using the existing components. The image will occupy the full space from the beginning of the column to the edge of the visual , 1920px, and when the screen is smaller it will hide part of the image. Column widths can be changed to tablet size, and below this breakpoint, the column containing the image will have a width of col-12 on phones and ´´compact phones.You can also change the column order in phone width and below.
-- START - IF IMAGE ON THE LEFT SIDE --
-- PLACE CONTENT --
-- END - IF IMAGE ON THE LEFT SIDE --
-- START - IF IMAGE ON THE RIGHT SIDE --
-- PLACE CONTENT --
-- END - IF IMAGE ON THE RIGHT SIDE --
How to Implement
This component starts in the off-grid-outer div and this div also contains the container-fluid class.
In this div you can add padding and margins (top and bottom) classes for the different breakpoints.
In the back office you can enter the number of columns each part occupies in the tablet size (col-md-*), and below that the behavior will be fixed.
The number of columns in desktops (xl), laptops (lg) and tablets (md) will be the same, for example 6 column width will have a col-md-6 and the already existing classes for col-*.
Check the classes in each of the columns. The image should be placed inside the off-grid__extreme div and the content in the off-grid__content div.
If the image is on the left side the class off-grid_extreme-left will be added to the off-grid__extreme div.
The height of the component is determined by the tallest element and the remaining content will be vertically aligned.
If the user chooses to change the order of the columns under tablet (col-md-*) size, place in the left column the classes order-md-1 order-2 and in the right column order-md-2 order-1.
In each column the user can also add padding classes (top and bottom)