What is Responsive Design?

Responsive design ensures that your website is easy to view across different devices, from desktop monitors to mobile phones. Webpages conform and adapt to different screen resolutions without compromising readability. Responsiveness is possible by a page elements’ ability to wrap, scale up and down, or change layout/styles based on the device’s width.

Replo makes building responsive websites easy by allowing you to apply different style overrides to each device size, and edit desktop, tablet, and mobile sizes side by side in the editor with Multi-Device Editing.

Breakpoints

Breakpoints are device widths at which your site's content and layout will adjust. Replo has built-in breakpoints that delineate desktop, tablet, and mobile width ranges and are represented by device frames in the editor. Use these breakpoints as a guide for customizing your site design for each device size.

Style Inheritance and Overrides

Styles and changes made to larger breakpoints automatically cascade down and get inherited by smaller breakpoints. For example, if you set a text’s font size to 64px on desktop, it will also be 64px on tablet and mobile by default.

You can override these inherited styles for smaller device sizes by changing the styles on that device frame. In the previous example, let’s say you change the font size to 24px on mobile — this change will override the 64px style inherited by the desktop breakpoint but will not affect the desktop or tablet designs.

Style changes cascade from larger to smaller devices but the reverse is not true. Using the same example to illustrate this point further, making changes on the tablet device styling will override the styles given to it by desktop while still cascading down to be inherited by mobile.

Multi-Device Editing

The complexities of style inheritance and overrides can be difficult to understand at first. Replo’s Multi-device Editing feature helps you visualize how changes on one device size affects others by letting you view and edit your pages in desktop, tablet, and mobile views simultaneously.