Creating responsive layouts

Responsive websites adjust their layout and content so that they work great at any screen size. This is done with CSS rules that use media queries to target different screen sizes.

Introduction

Although frameworks like Bootstrap and Foundation provide responsive features out-of-the-box you can use Pinegrow to add customised responsive behaviour to any HTML page or to fine-tune responsive behaviour of elements on Bootstrap or Foundation webpage.

Breakpoints

Breakpoints are screen widths at which page changes its behaviour. For example, we can define a breakpoint at 500px and display a single column content at sizes of 500px and below and two columns at sizes larger than 500px.

To define breakpoints choose Manage breakpoints in the display size menu of the page.