What's adjustable on each screen size?

Posted by: Murray Gray
Updated: 2 years ago
Reading time: 2 minutes, 51 seconds

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

How do you feel about this article?

NEW: Can we do the work for you?

If you're like most entrepreneurs, you have a million projects in your head, with no way to get them all done. As a result, you feel stalled and frustrated.

You've tried doing it all yourself, but you know it's unsustainable, and a one way ticket to burnout and overwhelm.

You don't yet have the resources to hire your own team of designers and developers, so you feel stuck, going around in circles.

If you resonate, then relax, because we're here to help.

Our in-house tech, design & web team is ready to help, and available for almost anything. (Seriously!)

We'll take all of the tasks you've been collecting, and make them happen for you quickly and efficiently in the background, leaving you free to focus on what you do best.

And you won't pay through the nose either -- it's available for an incredibly low 5-hour "done for you" package -- it's just $200 for access to our in-house, highly-trained team of tech and design professionals. Best of all, the time never expires and you can use it as quickly or as slowly as you like.

Grab your 5-hour 'done for you' package here and let's get your business moving again!