Most web traffic today comes from mobile devices, so your pages need to look good on a small screen. In this lesson, you'll see how Ontraport Pages adapt to phones on their own, and how to fine-tune them when they need a little help.
Because you build pages from rows and columns, your layout is responsive automatically. On a phone, side-by-side columns stack vertically, with the left column on top.
To see your mobile layout, hover over the device preview icon and click the mobile view icon. The default view shows all your blocks, including ones set to desktop only or mobile only.
When a block doesn't look right on mobile, you have two options. Edit its mobile style settings when you want to keep the same design and just adjust fonts, margins or padding. Make a mobile-only block when you want to change the design, like removing some text or adding an image.
In mobile view, click the mobile font style dropdown to set how your fonts look on phones. You can change the font family, size, line height and weight. Choose fonts that are easy to read at small sizes, and skip ornate ones. Body text usually runs 16 to 18 pixels on desktop and 14 to 16 on mobile. Sans-serif fonts, like Roboto, Nunito, Montserrat or Lato, are a good choice.
To change a block's spacing on mobile, hover over its settings icon, click Edit block, then Spacing, and click Mobile at the top of the left sidebar. Columns work the same way. In Edit block, hover over the column, click its settings icon, then Spacing, then Mobile.
For a single element, switch to mobile view, hover over the element and click its settings icon. The Position tab sets the element's padding, margins, alignment and width.
Sometimes a design is just too busy for a phone, and spacing won't fix it. So build a separate mobile version. On the original block, click Edit block, then Display settings, and set Device display to Desktop Only. Copy the block. On the copy, set Device display to Mobile Only. Then simplify the copy and fine-tune it with the mobile style settings.
Mobile-only blocks also fix a common layout problem. A row of labels above a row of content works well on desktop. But on mobile the columns collapse, so all the labels pile up together instead of sitting above their sections. The fix is a mobile-only block that puts each label in the same row as its content. Then adjust the spacing with the element position settings.
Dynamic blocks follow the same rules. In the List layout, columns and rows collapse like a regular block. In the Grid layout, the side-by-side columns inside each card stack vertically.
Finally, Mobile Width, also called the mobile breakpoint, sets the screen width where your mobile styling kicks in. The default is 600 pixels, and that fits most needs. If you want tablets to get your mobile view too, set it to around 800.
So: your columns stack on their own, mobile style settings fine-tune fonts, spacing and position, and mobile-only blocks handle designs that need a different layout. Next up: publishing your pages, so people can actually see them.