Column widths on smaller screens

Whenever you design a layout based on the page builder you set an initial column width, however, if this width is not different on smaller screens you will get the same layout as on desktop.

The entire Journal layout is 100% customizable in this regard. You open the column options of any column in your layout builder, for example, in Journal > Layouts > Home...hover over a column and click the edit button to bring up the column options popup (small pencil button seen when hovering over the column). 

In the column options popup, you will find additional column options, including the Width option. So this by default reflects whatever width you assign to the column but you can now add breakpoint rules (green plus button on the right side of the option).

So you apply a rule, indicate a screen width, and change the option, in this case, you apply a smaller width, say 760 or anything else, and then apply a different width, which will only kick in at that screen width. 

In this example, I have the column set at 75% by default, which applies to all screens unless I apply a breakpoint rule to change it. So I apply a rule at 760 and change the column width to 100% at that rule,

This means that the column will expand the entire width of the screen (and push other columns from the side down) at any screen at or below 760.

Find out more about this concept here: https://docs.journal-theme.com/docs/variables/breakpoints/

More on columns here: https://docs.journal-theme.com/docs/layouts/columns/