Make your website responsive

You put all of this effort into building a sick website, but all your irl friends exclusively use their phones, which makes everything look terrible. Hopefully this guide can help you consider some ways to make your existing layout responsive. (I always welcome feedback, let me know if this helps or what <3)

I created this guide after visiting a bunch of websites on Neocities and trying to identify the most common ‘pitfalls’ of non-responsive sites.

A disclaimer

The complexity of a layout determines how complicated it’s going to be to make responsive. You will find it very difficult to make your site responsive if:

  • The actual positioning of your layout elements (the “boxes”) are heavily reliant on images.
  • Your layout is highly reliant on position:absolute
  • Your layout is highly reliant on tables.

On the other side of things, if your layout is a single one-column-style layout, it will be incredibly easy for you to make your layout responsive.

Also, I don’t mean to plug myself but I also want to provide an option for those who don’t have the time and interest to learn all of this. I have a layout maker that is totally responsive – you only have to watch your images and make sure they are assigned max-width instead of width (more on that below).

It would be impossible to include every potential ‘unique’ struggle with making a website responsive. That said, if you go through this guide and try it out and still find yourself struggling, don’t hesitate to reach out and ask. Even in the Yesterweb Discord server, there is a channel for asking for help. Your struggle is not yours alone! <3

Set the viewport

An important term when talking about responsiveness is the word viewport. This refers to the size of the screen. When we resize a browser window, we are changing the viewport.

You’ll need to include a special viewport meta tag in your <head></head> tags of every page. This sets the viewport, which controls how it scales on smaller devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Code language: HTML, XML (xml)

It can make some things look funky if you don’t include this, so it’s always good to add it in before we begin troubleshooting the site itself.

Use the Inspect Tool

This is hands down the most important tool when figuring out responsiveness. (I made a video about how to use it here). Making a site mobile-friendly is less about making your site responsive and more about locating and undoing all of the un-responsiveness, if that makes sense?

Before you can know what to change, you have to observe your website under specific conditions. Mobile device viewports are long and narrow, unlike desktop ones. The easiest way to troubleshoot a website is to press CTRL+SHIFT+I to open the Inspect Tool. You can click and drag this panel to resize your screen.

As you resize your website this way, you might see some elements get cut off, like in the gif below.

At some point while narrowing the screen, the text gets cut off. This is the type of thing we should look for, and use as our starting point.

The exact pixel width of when the website ‘breaks’ or goes offscreen is known as a breakpoint. Media queries (which I go over below) use breakpoints to control what happens at a certain width, but we don’t need to use one of those just yet.

Remove your fixed widths

The problem above is usually caused because an element has a fixed width that is wider than particular viewport widths. The narrowest viewport in use currently is 320px, an iPhone 5, so if you want things to work perfectly for everyone, your widest fixed-width element should not exceed 320px.

This is solved by finding which element has a fixed width and changing the width property to max-width.

// in other words width: 800px; // becomes... max-width:800px;
Code language: JavaScript (javascript)

Max-width is the widest possible width – if there is free space on the page. Now, when the page is resized, it shrinks:

Now it resizes with the screen! It gets a little… unreadable, though.

It just so happens that the sidebar in the example above makes things difficult. When dealing with one or more large elements side-by-side, there is no good solution (that I personally know of) unless your HTML is set up for with flexbox. I’d highly recommend rebuilding your layout with flexbox in mind because that is the easiest way I’ve found to make sidebar layouts adjust for mobile. For example, a sidebar-content-sidebar layout might look like this in HTML:

<div class="wrapper"> <div class="lsidebar">sidebar</div> <div class="content">content</div> <div class="rsidebar">sidebar</div> </div>
Code language: HTML, XML (xml)

The .wrapper selector would have display:flex; in the CSS.

I explain this more in depth on my beginner flexbox tutorial. The second half specifically talks about a sidebar-like scenario.

Finding the elements you need to adjust

If you’re a sloppy coder (like I am), you might have fixed widths on several different elements, which makes it difficult to find exactly which are impacting your layout. This is why I highly recommend getting to intimately know the Inspect Element tool.

I made a quick video demonstrating how to use the Inspect Element tool – it’s such a difficult task to explain this accurately since everyone uses different browsers, so hopefully a quick walk-through can do it justice.

Making images responsive

It’s only necessary to worry about making your unresponsive images responsive. You don’t need to do this with every image (just the big ones that look weird on small devices!)

When making images responsive, you also want to assign a max-width instead of a fixed width.

Also, keep in mind that images on their own are considered inline elements, which means they behave differently than block elements (like divs). Here is a quick trick to working with images:

An image with max-width:100%; will always fill 100% of its parent container (div). In other words, the div that the image is inside of literally ‘contains’ the image inside of itself. To make an image behave as you might expect, wrap the image in a div assign the container div with a max-width.

You can also use width in addition to max-width and think of it as a 'minimum width'. 

Media queries

Media queries are bits of CSS at the end of our stylesheet that loads different CSS when the viewport is at a certain size and below.

The magic behind media queries is that browsers interpret CSS from top to bottom. If you make your font color red, and then a couple lines after you make it blue, it will be blue. CSS essentially can ‘overwrite’ its own code in this way, which is how media queries work.

For example, let’s say you have a purely decorative element – a giant blinking glittery gif – and it just won’t play nice with mobile. You can create a media query to say, “hide the blinking gif if the screen in 800px or smaller”.

Here is how the syntax for the media query works: (I copy it off w3schools every time, haha):

@media only screen and (max-width: 800px) { // code here }
Code language: JavaScript (javascript)

The max-width will always be the width you want the change (the code inside of the brackets) to become active at. You can find the exact pixel width by using the Inspect Tool.

Here is another example with some styles inside of the query:

@media only screen and (max-width: 800px) { .blinking-gif { display:none; } }
Code language: CSS (css)

There are also much more complex media queries out there, if you’re inclined to experiment.

I know this is a lot, but hopefully this can get you started with making your website responsive. The most important things to remember are:

  • Add the viewport meta tag to your head tags.
  • Avoid using width (use max-width instead) on elements larger than 320px.
  • Use the Inspect Tool to find something specific to change before making a change. Even better, make your change in the inspect tool to see how it looks before adding it to your live site.
  • Use media queries to make tweaks to your site

Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

Leave a Comment