Adapting your website for mobile use

Recently, I’ve been working a portfolio website for an artist, and it’s expected that anyone she shares the site with could be viewing the site on their phone. This is my first time adapting a site for mobile use, so I’m sharing what I learned here.

Surprisingly, getting the basics to work isn’t very difficult. In your CSS file, you just write “@media (max-width: ???)” and then write the changes you want in curly brackets at whatever width you want them to change at. The max-width refers to the screen size. For example, here’s the standard CSS for a few of my classes:

.site-content {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin-left: 15%;
  margin-right: 15%;
  width: 70%
}
.project-card {
  position: relative;
  overflow: hidden;
  width: 33.3333%;
  border: 0.5em solid transparent;
  box-sizing: border-box;
}
.nav {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  background-color: rgb(255, 255, 255);
  width: 100%;
  margin: 0;
}

And then, for any content I want to change when the screen gets smaller, I write those changes in a media trigger:

@media (max-width: 832px) {
.site-content {
    margin-left: 0%;
    margin-right: 0%;
    width: 100%
  }
.project-card {
    width: 50%;
    border: 0.5em solid transparent;
  }
.nav {
    display: none;
  }
.hamburger-click-area {
    display: flex;
  }
}

I have a grid of the artist images that take up 3 per row, and since I wanted to make the images stand out, I changed it to 2 per row by making the project-card class’ width 50% instead of 33%. For even smaller devices, I can write another media trigger to make 1 image per row:

@media (max-width: 540px) {
  .project-card {
    width: 100%;
  }
}

Anything from the larger media trigger will still be in effect.

You may have noticed that I made some changes to some classes having to do with navigation as well. I stopped displaying the usual nav bar and replaced it with a hamburger symbol that can be clicked or tapped to show a new vertical navigation menu. I’m using React to build this project, so I decided to make a separate component for the mobile navigation vs the regular navbar. I won’t copy and paste the entire components here to show exactly what I did, but it’s pretty straightforward. I put both the regular navbar and the mobile navbar in the header of the HTML, and made the mobile navbar invisible with CSS unless triggered by clicking the hamburger icon. Since the hamburger icon can’t be displayed unless the screen is small enough for mobile devices, the mobile navbar also can’t be displayed unless the user is on a mobile device.

I’m unfortunately unable to deploy the project yet until I can obtain high quality photos of all the artwork, so I’ll update this blogpost once I can share the site.