Making website responsive to devices other than desktop pc

I've been tasked to try and make my friend a portfolio website(my real first project).

I think I've made a mistake of only focusing on designing for desktop and forgetting about other devices. Here's a link to the site so you can see how it is responding; https://vsworldtest.herokuapp.com/

As you can see its not responding as I would like it when loading on a mobile phone. Still some tweaks needed and some cleaning of the css for desktop but it is more than viable for testing at the moment.

If you have any idea of what I could do to make this responsive for mobile devices and tablets please share with me. Code to follow:

CSS

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0">
    <title>vstheWorld</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"/>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous">
    </script>
    <style>
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
      * {
        box-sizing: border-box;
      }
      .container-top {
        margin: 500px;
      }
      hr {
        color: white;
        margin-bottom: 20px;
      }
      .banner-image {
        text-align: center;
      }
      body {
        {% load static %}
        background-image: url("{% static 'images/purple.jpg' %}");
        padding: 15px;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        background-repeat: no-repeat;
        background-size: 100% 200%;
        position: relative;
      }
      /* Center website */
      main {
        max-width: 100%%;
        margin: auto;
      }
      .align-center {
        text-align: center;
      }
      h1 {
        font-size: 50px;
        text-align: center;
        color: white; 
      }
      h2 {
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        color: white;
        padding-top: px;
        margin-bottom: -10px;
      }
      h3 {
        text-align: center;
        color: white;
      }
      p { 
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        color: white;
      }
      .arrow-down {
        border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }

      /* Portfolio Columns & Images */
      .thumbnail {
        width: 100%;
        margin-bottom: 3px;
      }
      .col-md-13 {
        margin-right: -58px;
      } 
      .col-md-4 {
        margin-left: -10px;
        margin-right: -10px;
      } 
      row {
        margin: 8px -16px;
        margin-bottom: 20px;
      }

      /* About Card*/
      .card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
      }

      /* Navbar */
      .navbar {
        margin: -1% -1% 1% -1%;
        padding: 30px;
      }
      .navbar .navbar-nav .nav-link {
        color: #FFFFFF;
        font-size: 1.7em;
      }
      .nav-link {
        padding-top: 35px;
        padding-left: 5px;
      }
      .navbar .navbar-nav .nav-link:hover{
        color: #FFFFFF;
        text-decoration: underline;
      }
      .navbar-logo-centered .navbar-nav .nav-link{
        padding: .5em 1em;
      }
      .navbar img {
        height: 100px;
        padding-top: 10px;
        padding-left: 40px;
        padding-right: 40px;
        /* put value of image height as your need */
        float: ;
        margin-right: px;
      }
      #vswlogo { 
        top:-50px; 
        left:-35px; 
        display:block; 
        z-index:999; 
        cursor: pointer; 
        -webkit-transition-property: all; 
        -webkit-transition-duration: 0.3s; 
        -webkit-transition-timing-function: ease; 
        } 
        #vswlogo:hover {
          transform: scale(1.3);
        }

      /* Contact Form */
      form {
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        color: white;
      }
      #form-submit:hover {
        font-weight: bold;
        background-color: #0e0019;
        transition: 0.2s;
      }
    </style>
  </head>
  <body>

Home Page(Seems to be the only page not working how I'd like.)

{% extends 'portfolio/main.html' %} 
{% block content %}
{% load static %}
<body>
  <div>
    <img class="banner-image" src="{% static 'images/Banner.png' %}" alt="My image"/>
  </div>
    <h2 id="portfolio">Work</h2>
    <p class="align-center"><i class="arrow-down"></i></p>
<main>
    <div class=" col-md-13">
        <div class="row">

            {% for post in projects %}
            <div class="col-md-4">
                    <img class="thumbnail" src="{{post.thumbnail.url}}" alt="My image" style="width: 100%"/>
            </div>
            {% empty %}
            <h3> No Projects...</h3>
            {% endfor %}
</main>
</body>
{% endblock content %}

When working on making stuff responsive, it's best to make it mobile first (and size things up as you get more viewport space), than it is to make it desktop first (and try to cram all content into the smaller viewport space).

I'd suggest writing your CSS for mobile sizes first, and then sizing things up for bigger screens by using @media queries.

(e.g. run this CSS ONLY if the screen is THIS big).

Back to Top