Having trouble using responsive web design

HTML-CSS
1

Below is a link to my codepen (it is not mobile friendly yet):

Codepen

Looks good on a computer, but def not on mobile. I have tried using responsive web design but I have no idea what I am doing. Can anyone talk me through this?

2

What about responsive design are you having trouble?

3

I am clueless when it comes to RWD. I think it is because I do not fully understand it. Do I have to set it for each section? Is there a way to set it for the whole page?

4

Start by adding a media query.

While you can get more complicated, start with Max-Width. See here for formatting:

https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

Set the max width for the width of the screen when your page first breaks. For example 600px is good for tablet viewing.

Inside the media query, redeclare and rewrite the CSS for the elements that break at this width so they look good at this width. For example you have:

a.fb-msg-btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 8px 16px;
margin: 0;
background-color: #0084ff;
border: 0;
cursor: pointer;
outline: none;
}

in the media query you might set a width of 100% and make the padding smaller.

You only need one media query per size. So if you use 600, then only declare it once. Media queries are the ONLY time you nest normal CSS.

1 Like