Как уменьшить расстояние между абзацами для мобильной версии?

Заглушка для сайта: https://zag.webtango.ru/ На мобиле не нравится расстояние между надписями 1.jpg Как это исправить?
Код страницы
<!DOCTYPE html>

<html lang="ru">

<head>
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
  <link rel="manifest" href="/images/favicon/site.webmanifest">    
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="Госмедтуризм">
  <meta property="og:description" content="Развиваем медицинский туризм в государственных клиниках России.">
  <meta property="og:image" content="https://zag.webtango.ru/images/favicon/favicon-32x32.png">
  <meta property="og:url" content="https://zag.webtango.ru/">
  <meta name="keywords" content="туризм, медицина, клиника, лечение" />
  <meta name="description" content="Развиваем медицинский туризм в государственных клиниках России." />
    <title>Госмедтуризм</title>

    <style>

        body {
            margin: 0;
            font-family: "Varela", sans-serif;
            background: #ffffff;
            color: #333;
        }

        .container {
            display: flex;
            justify-content: center;
            padding: 20px;
            flex-wrap: wrap;
            align-items: flex-start; /* Выравнивание колонок по верхнему краю */
        }

        .left-column, .middle-column, .right-column {
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .left-column img,
        .middle-column img {
            width: 100%;
            object-fit: cover;
            margin-bottom: 10px;
        }

        /* Скрываем mobile-gallery по умолчанию */
        .mobile-gallery {
            display: none; /* Скрыт по умолчанию */
        }

        /* Скрываем изображения в мобильной версии */
        @media (max-width: 768px) {
            .left-column img {
                display: none; /* Скрыть изображения с аркой и фае */
            }

            .right-column {
                width: 100%; /* Ширина 100% для мобильной версии */
                height: 400px; /* Высота правой колонки для мобильной версии */
                padding: 10px; /* Уменьшение отступа для мобильной версии */
            }

            .mobile-gallery {
                display: flex; /* Показываем только на мобильных устройствах */
                justify-content: space-between;
                margin-top: 10px;
            }

            .mobile-gallery img {
                width: calc(50% - 5px);
                object-fit: cover;
            }
        }

        .right-column {
            padding: 20px;
            background-color: #f0f0f0;
            max-width: 300px;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 717px; /* Высота на 745px в десктопной версии */
        }

        .logo {
            width: 200px;
            height: 51px;
            margin-bottom: 20px;
        }

        .custom-text, .status-contact p {
            flex-grow: 1;
            font-size: 14px; /* Размер шрифта одинаковый для всех текстов */
            line-height: 1.5; /* Высота строки для лучшего восприятия */
            margin: 0; /* Убираем отступы */
        }

        .contact-link {
            color: #555;
            text-decoration: none;
        }

        .contact-link:hover {
            text-decoration: underline;
        }

    </style>

</head>

<body>

    <div class="container">

        <div class="left-column">
            <img src="https://zag.webtango.ru/images/arka.jpg" alt="изображение 1" />
            <img src="https://zag.webtango.ru/images/fae.jpg" alt="изображение 2" />
        </div>

        <div class="middle-column">
            <img src="https://zag.webtango.ru/images/maneken.jpg" alt="изображение 3" />
            <div class="mobile-only">
                <div class="mobile-gallery">
                    <img src="https://zag.webtango.ru/images/arka.jpg" alt="изображение 1" />
                    <img src="https://zag.webtango.ru/images/fae.jpg" alt="изображение 2" />
                </div>
            </div>
        </div>

        <div class="right-column">
            <img src="https://zag.webtango.ru/images/logo.png" alt="Логотип Госмедтуризм" class="logo" />
            <div class="custom-text">
                <p>Развиваем медицинский туризм в государственных клиниках России.</p>
                <p>Я в телеграм для связи <a href="https://t.me/TANGO_Siberia">Telegram</a></p>
            </div>
            <div class="status-contact">
                <p>Сайт на реконструкции</p>
                <p class="contact-link">
                    <a href="mailto:info@tamel.group" class="contact-link">info@tamel.group</a><br>
                    <a href="tel:+74812251227" class="contact-link">+7 481 225 12 27</a>
                </p>
            </div>
        </div>

    </div>

</body>

</html>
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
webrevenue
@webrevenue
Веб-дизайнер и SEO оптимизатор
@media (max-width: 525px) {
.right-column {
    height: auto;
}
прочие стили если нужно
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы