225-248-0035
This is a guide on how to use the Columns, Column Class, and Extra Column Class fields when creating an Image Left or Image Right field.
The site uses a 12 column grid layout. Use the Bulma Docs for reference.
The Columns Class is added to the parent div of the columns
The Column Class is added to the Content Column
The Extra Column Class is added to the Image column
Note: The Column Class is always added to the content column regardless if the section type is Image Left or Image Right.
Note: The Extra Column Class is always added to the Image column regardless if the section type is Image Left or Image Right.
Note: By default, the columns are stacked on mobile.
This is what an image-right section looks like when the Columns Class and Column Class fields are left blank.
By default the following classes are added if the following fields are left blank.
Columns Class: is-variable is-8
Column Class: is-one-half
Extra Column Class: if left blank the width of this column will automatically fill the rest of the container width
This is what an image-right section looks like when the Column Class field is set to "is-7".
is-7 specifies the content column should take up 7 of the 12 grid columns.
This is what an image-right section looks like when the Column Class field is set to "is-5".
is-5 specifies the content column should take up 5 of the 12 grid columns.
This is what an image-right section looks like when:
Notice that 5 + 5 = 10 which is less than 12 so the content will not span the entire width of the container.
This is what an image-right section looks like when:
Notice that since the Extra Column Class is left blank its width will be applied automatically.
This is what an image-right section looks like when:
Notice that since the Extra Column Class is left blank its width will be applied automatically.
By default, columns are stacked on mobile and then implemented on tablet screen sizes (above 678px).
This is what an image-right section looks like when:
Notice that the Columns class is explicitly set to multiline so that the columns can be stacked. Otherwise the columns ould extend horizontally even though they are wider than the 12 column grid container.
Notice that you must also add the "is-variable is-6" classes to set the gutter width to increase the space between the content and image columns.
Sometimes you want to center columns when stacking them on tablet so you can set the width of the image column to less than the full width of the container
This is what an image-right section looks like when:
Implement columns on mobile screen sizes
Columns Class is set to "is-mobile is-variable is-6"
Container Width is set to "is-narrow"
This is an example of when you want the image to be smaller with a shorter blurb, such as a logo.
This is an example of when you want the image to be a little smaller with a slightly shorter blurb.
This is an example of when you want the image to be larger. Sometimes the client will complain the images are too small in which case you can set the container to wide.
This is an example of when you want the image to be larger and you have more text content.
