Заглушка для сайта:
https://zag.webtango.ru/ На мобиле не нравится расстояние между надписями
Как это исправить?
Код страницы
<!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>
