The Startup
Published in

The Startup

Adding Responsive Site Design

While it’s easier (and better practice) to design and style your app for various screen sizes from the beginning, it IS possible to add responsive design to your projects after you’ve begun. Want to retroactively add responsiveness to an existing app? Here are 6 tips to get you started.

Small egg, big egg
Learn how to scale your websites for various screen sizes


Learning to code in a Bootcamp program has lots of advantages. A project-focused program was great for me to solidify what I was learning. I built databases, CRUD backends, Jamstack applications, and modern web frameworks in four-day-long project sprints, and presented these projects to my classmates at the end of the week.

As a former graphic designer, I always made time to plan out and implement basic wireframes, colors, and typography in my projects. But I never got the time to learn or implement responsive design in any of my projects during the Bootcamp, which meant that after graduating I was left with projects that I was proud of, but weren’t responsive. After I deployed the first project (actually my portfolio) and proudly sent the link to all my friends, I realized the glaring error in my ways. My site that looked perfect on a desktop was UTTERLY unreadable on mobile.

This blog post is meant to serve anyone who’s at the same daunting fork in the road. I know that the thought of re-opening that CSS file knowing your about to perform major surgery on it fills you with dread but I also know you don’t want your hard work misrepresented just because it was opened on the wrong screen size.

Without further-a-do, here are 6 things that helped me to focus my energy on, and that I hope will help you too. If you go step by step, you’ll have a website that looks great anywhere before you know it.

Adding Responsiveness

1. Find What Breaks

Take some time fiddling with the size of your browser window and make a list of components that need the most work. You can also use your chrome developer tools to snap the browser to key breakpoints including tablet and mobile. Note that absolutely positioned items are very hard to work with and should be used sparingly.

2. Use a Sass or SCSS file instead of CSS

Using variables and mixins will make your stylesheet much more organized and readable. Variables also let you easily make one edit that will update your entire stylesheet.

3. Convert CSS Units from absolute to relative

Replace any absolute length units (px, pt, pc, in) to relative length units (em, vh, vw, %). This will automatically make your application much more flexible.

4. Use Media Queries

Start fixing the most glaring scaling issues first, and work your way down to the details. Set your breakpoints with Sass variables and then use a media query such as @media (max-width: 600px) or @media (max-width: $phone).

5. Flexed items

Items that are flexed in the desktop version rarely have the horizontal space on mobile. One media query that I found myself writing often was:

display: flex
@media (max-width: 600px)
flex-direction: column
// also written like:
@media (min-width: 600px)
display: flex

6. Images

Last but not least, I want to talk about images. Images can be finicky when scaling down the screen size. By putting your image inside a div, you can fit the image to the div, which is easier to manipulate. Here are two ways to fit the image:

object-fit: contain
max-width: 100%

Thanks for reading! If you have any comments or suggestions, feel free to email me at




Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

The secret behind amazing interfaces

Emoji on a blue background of interfaces and question marks around it.

How to Draw Pictures: Contours

To The Futures of The Industry

Jefferson Airplane Poster. Orange text written in a psyedelic style. Under it is the photo of the band. Background is green.

Better UX Research Through Body Language

How Punk changed Graphic Design and is history repeating itself?

Three reasons why I stopped using design mockups to present my work.

The Accessibility, Hierarchy, and Organisation of a book

Creating a Custom Map in Mapbox

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lydia Gregory

Lydia Gregory

Full-Stack Software Engineer, Designer, and salsa dancer.

More from Medium

How do I start to design my website?

Web Accessibility & Suggestions

Working with Material UI

Is CSS the missing link between a designer and a developer?