Introduction

If you haven't read our short introduction to responsive, then we highly recommend you start there, before trying to make sense of this article.

Next, check out Murray's short video on how to tweak your page look and feel for each each screen size.

Here's a complete list of what's adjustable independently for each screen size

Section

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • background color
  • background gradient
  • background image
  • background video
  • background map
  • section height

Row

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • background color
  • background gradient
  • background image
  • background video
  • background map

Column

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • background color
  • background gradient
  • background image
  • background video
  • background map

Headline element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • headline globals (H1, H2, H3, H4, H5, H6)
  • font size

HTML element

  • width

Paragraph element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • text block globals (P1, P2, P3)
  • font size

Button element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • font size
  • letter spacing
  • hover letter spacing
  • border hover color
  • button color
  • border color
  • font color
  • button globals (B1, B2, B3)

Comment element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings

Countdown element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • Number:
  • - font size
  • - letter spacing
  • - line height
  • Label:
  • - font size
  • - letter spacing
  • - line height
  • - size

Divider element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • width
  • opacity
  • color

Image element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • shadow
  • size
  • corner radius
  • opacity
  • border color

Input element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • input color
  • border color
  • opacity
  • text color
  • font size
  • width

Map element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • width
  • height

Navigation element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings

Social Network element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • color

Text Area element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • width

Video element

  • top/bottom, left/right margins
  • top/bottom, left/right paddings
  • width
  • height