Mobile Device Breakpoints
A responsive template presents your look and feel and your content differently based on the device displaying the page, and the device's orientation (vertical or horizontal).
The presentation changes based on what's called the "viewport." A viewport is basically your phone or tablet screen, taking its orientation into account.
For example, many phones have a screen in vertical orientation that's less than 447px wide. Flip them to horizontal and the screen is in the range of 667px.
So a responsive template displays the look and feel and the content one way for vertical, and slightly differently for horizontal, and both are different from the desktop (computer) version of the page.
If every website had a customized design for every smartphone and tablet on the market, and for each orientation for each device, its mobile CSS stylesheet would be megabytes long.
Instead, designers use "breakpoints," which are screen widths at which some part of the design "breaks" and a customization is necessary.
The two breakpoints Solo Build It! uses are 768px and 447px. Anything larger than 768px is considered desktop (including larger tablets (e.g., iPad Pros) in horizontal orientation).
CSS Inheritance
CSS styling for an element can be inherited from its parent element. If the designer has not added any styling for the element, then the browser uses the styling provided by the parent.
That's why it's important to style the desktop version of your site first. If you customized for the 447px breakpoint version first, then styled the desktop version, some of desktop's changes might affect parts of the design in the 447px version.
It's best to customize for the 768px breakpoint version next, since customizations made there will affect the 447px breakpoint version (more on this below).
Finally, customize for the 447px version.
Then save your design and you're done.
≤768px Breakpoint
Any screen width greater than 768px is considered to be the desktop size. So any device wider than 768px will see the Desktop version of your site.
Any device that's 768px or narrower is considered a mobile device. That includes smaller tablets in vertical orientation (but not horizontal). If you're unclear what this means, start at the top of this help for some background.
When you choose the tablet icon in the Screen Size menu, you'll see some text just above the header image, indicating that you'll be customizing for all devices with the 768px screen width and narrower.
Customize whatever you want to change. If you don't customize an element, and the design does not already have a mobile styling for that element, it will inherit the Desktop styling.
Remember to look at the font size (it should be at least 16px, and will likely be 18px). Start with the Body, then Content Column, Nav Column (if the template has one), Extra Column (if the template has one), and the Footer.
Also check the line height. It's important to have enough space between lines if you have a lot of text links. More space makes it easier to tap on the correct link with a big finger.
≤447px Breakpoint
The 447px breakpoint is for any screen that's narrower than 448px. That includes all vertical mobile phones. If you're unclear what this means, start at the top of this help for some background.
When you click on the phone icon in the Screen Size menu, you'll see some text just above the device, indicating that you'll be customizing for all devices with a screen size 447px and narrower.
Customize whatever you want to change. If you do not customize an element, and the design does not already have a mobile styling for that element, it will inherit the 768px styling. If it was not styled there, it will inherit the Desktop styling.
Remember to look at the font size (it should be at least 16px, and will likely be 18px). Start with the Body, then Content Column, Nav Column (if the design has one), Extra Column (if the design has one), and the Footer.
Also check the line height. It's important to have enough space between lines if you have a lot of text links. More space makes it easier to tap on the correct link with a big finger.