Обеспечение отзывчивости веб-сайта на устройства, отличные от настольных ПК

Мне поручили попытаться сделать моему другу сайт-портфолио (мой первый реальный проект).

Я думаю, что совершил ошибку, сосредоточившись на разработке только для настольных компьютеров и забыв о других устройствах. Вот ссылка на сайт, чтобы вы могли увидеть, как он реагирует; https://vsworldtest.herokuapp.com/

Как вы можете видеть, он не отвечает так, как я хотел бы, при загрузке на мобильном телефоне. По-прежнему необходимы некоторые доработки и чистка css для рабочего стола, но на данный момент он более чем пригоден для тестирования.

Если у вас есть идеи, что я могу сделать, чтобы сделать это отзывчивым для мобильных устройств и планшетов, пожалуйста, поделитесь со мной. Код для последующего использования:

CSS

Главная страница (кажется, это единственная страница, которая не работает так, как мне хотелось бы) 

{% 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 %}

При работе над созданием отзывчивого материала лучше сделать его сначала мобильным (и увеличивать размер по мере увеличения пространства просмотра) , чем сначала настольным (и пытаться запихнуть все содержимое в меньшее пространство просмотра) .

Я бы предложил сначала написать CSS для мобильных размеров, а затем увеличить размеры для больших экранов с помощью @media queries.

(например, запускать это CSS ТОЛЬКО если экран ЭТОТ большой).

Вернуться на верх