How to make page responsive?

Hi, I’m currently working on my Tribute Page. I’ve tried making it responsive, but none of my methods seem to work.

My question: How do I make this Tribute Page responsive?

Link to page: https://codepen.io/zinzc/pen/MWyyjWv

1 Like

Use a narrow-first approach. Narrow your browser as far as it will go and style the page to look nice in that narrow width (hint, you definitely will not want side margins of 200px). This will be your base CSS.

Once you have the narrow width looking good then gradually widen your browser until you feel you have enough horizontal room to rearrange elements for a wider view port. Create your first CSS break point at this width using min-width and em units. To ballpark the em value just divide the pixel value by 16.

Repeat the widening process as needed.

1 Like

Thanks! After reading this I think it will be best to make a website responsive to begin with. Therefore, I will not edit this one to be responsive. But the next page I’m making, I’m going to make it responsive from the start.
Thanks again for the explanation. :slight_smile:
Cheers!

You can go either way, mobile first or desktop first. It depends on what you’re comfortable with. Since you already started with desktop first, i’ll advise you open your console, if you’re using chrome and then work with the width, while reducing the size of the browser.
I think you should attempt this.

1 Like

You can see what your website looks like on different screens in Chrome Dev Tools. Since you’re on codepen, click on change view, debug mode. From there you can click ctrl + shift + j to open dev tools. On the top left you can change your device toolbar (ctrl + shift + m) and see what it looks like on difference devices. Just a handy little tool.

1 Like