Мобильная версияДумаю, проблема в мобильных стилях (с 704 по 928 строку)
Сайт: https://gta-fandom.com/home
Мобильная версия
Код: Выделить всё
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NK8M80SQWB');
GTA 6 Wiki
/* Общие стили для мобильной версии */
@media (max-width: 768px) {
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 !important;
flex-grow: 1;
margin-left: -10px !important;
margin-right: -10px !important;
height: auto !important;
}
.welcome-box {
width: 100%;
margin-bottom: 0px !important;
padding: 0px;
box-sizing: border-box;
border-radius: 8px;
margin-top: 20px !important;
padding: 15px !important;
text-align: center;
width: 130%; /* Ширина центрального окна */
height: 160px !important;
align-items: center !important;
justify-items: center !important;
}
#article-count {
font-size: 16px;
word-wrap: break-word;
margin-top: 10px;
}
#last-activity {
font-size: 12px;
margin-top: 10px;
}
.section-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
margin: 0 5px;
align-items: center;
justify-items: center;
width: 100%;
}
.section {
height: 160px;
padding: 5px;
width: 140px;
box-sizing: border-box;
text-align: center;
}
.section img {
height: 80px;
margin-bottom: 5px;
}
.section h2 {
font-size: 12px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section p {
font-size: 10px;
line-height: 1.2;
margin-bottom: 5px;
padding: 0 5px;
}
.left-sidebar,
.right-sidebar {
width: 90%;
margin-bottom: 20px;
padding: 15px;
box-sizing: border-box;
}
.news-box,
.recommendations-box {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
.information-buttons button,
.random-buttons button {
padding: 10px;
font-size: 14px;
}
.latest-news-item img {
height: 100px;
}
.recommended-item {
width: calc(50% - 5px);
margin: 5px;
}
.recommended-item img {
height: 70px;
}
.main-content h1{
font-size: 20px !important;
margin-bottom: 30px;
}
.main-content h2{
font-size: 19px !important;
margin-bottom: 30px;
}
.main-content #article-count{
font-size: 15px !important;
line-height: 1.3;
}
.main-content #last-activity{
font-size: 11px !important;
}
.section-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Два окошка в ряд */
gap: 10px !important; /* Уменьшаем отступы между секциями */
align-items: center !important;
margin-left: 10px !important; /* Расстояние до левого края */
margin-right: 10px !important;
justify-items: center ; /* Центрируем карточки по горизонтали */
gap: 5px !important;
margin-top: 0px !important;
margin-bottom: 50px;
}
.section {
height: 210px; /* Ещё уменьшаем высоту секций */
padding: 8px; /* Уменьшаем внутренние отступы */
width: 160px; /* Секция занимает всю ширину колонки */
}
.section img {
height: 100px; /* Уменьшаем высоту изображений */
margin-bottom: 10px; /* Уменьшаем отступ от изображения до текста */
}
.section h2 {
font-size: 14px; /* Ещё уменьшаем заголовки */
margin-bottom: 0px !important; /* Уменьшаем отступ после заголовка */
}
.section p {
font-size: 11px; /* Уменьшаем текст описания */
line-height: 1.2;
margin-bottom:20px !important;
padding: 5px;
}
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto !important; /* автоматически перемещается вниз */
height: auto !important;
}
.content {
margin-top: 50px;
padding: 0 0px;
margin: 0 auto;
text-align: center;
height: auto !important;
}
.right-sidebar .random-buttons{
margin-bottom: 100px !important;
}
body {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
main {
flex: 1 1 auto !important; /*grow vertically*/
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.footer {
position:static;
bottom: 0;
width: 100%;
background-color: #1b1b1b;
color: #ffffff;
text-align: center !important;
padding: 10px ;
justify-content: end !important;
align-items: end !important;
margin-top: 500px !important;
height: 300px !important;
}
.header{
height: 300px !important;
}
}
[img]photos/logo.png[/img]
[url=index.html]Home[/url]
[url=explore.html]Explore[/url]
[url=trailers.html]Trailers[/url]
[url=news.html]News[/url]
[url=gallery.html]Gallery[/url]
[url=donate.html]Donate[/url]
Latest News
Information
Privacy Policy
About GTA 6 Wiki
Contact Us
Welcome to GTA 6 Wiki
Currently, there are [url=explore.html]xxx[/url] about the world of GTA 6
Last update: December 28, 2024 1:05
Explore GTA 6 World
[url=explore/characters.html]
[img]assets/bonny.jpg[/img]
Characters
Explore all the characters from the world of GTA 6.
[/url]
[url=explore/vehicles.html]
[img]explore/img/Vehicles.png[/img]
Vehicles
Explore all vehicles featured in the world of GTA 6.
[/url]
[url=explore/locations.html]
[img]explore/img/buildings.png[/img]
Locations
Explore all the locations from the world of GTA 6.
[/url]
[url=explore/weapons.html]
[img]explore/img/weapons.jpg[/img]
Weapons
Explore all the types of weapons featured in GTA 6.
[/url]
Recommended
Random Choice
Random Article
Random News
© 2024 GTA 6 Wiki. All rights reserved.
This is an unofficial fan site, not affiliated with Rockstar Games. GTA 6 and related assets are trademarks of Rockstar Games.
// Загрузка статей и подсчёт их количества
fetch('/pages.json')
.then(response => response.json())
.then(data => {
const articles = data; // Массив статей из pages.json
const articleCount = articles.length; // Подсчёт количества статей
// Обновляем текст с количеством статей
document.getElementById('article-number').innerText = `${articleCount} articles`;
})
.catch(error => console.error('Error fetching pages.json:', error));
// Загрузка статей и отображение рекомендованных
fetch('/pages.json')
.then(response => response.json())
.then(data => {
const articles = data; // Массив статей из pages.json
// Находим статью с названием "State of Leonida"
const leonidaArticle = articles.find(article => article.title === "State of Leonida");
if (leonidaArticle) {
const recommendedContainer = document.getElementById('recommended-articles');
// Очищаем контейнер на случай перезаписи
recommendedContainer.innerHTML = '';
// Добавляем карточку "State of Leonida" первой
const leonidaElement = document.createElement('div');
leonidaElement.classList.add('recommended-item');
leonidaElement.innerHTML = `
[img]${leonidaArticle.photo}[/img]
${leonidaArticle.title}
`;
leonidaElement.addEventListener('click', () => {
window.location.href = leonidaArticle.link;
});
recommendedContainer.appendChild(leonidaElement);
// Убираем "State of Leonida" из общего списка
const otherArticles = articles.filter(article => article.title !== "State of Leonida");
// Добавляем ровно 2 случайные статьи
const randomArticles = getRandomArticles(otherArticles, 2);
randomArticles.forEach(article => {
const articleElement = document.createElement('div');
articleElement.classList.add('recommended-item');
articleElement.innerHTML = `
[img]${article.photo}[/img]
${article.title}
`;
articleElement.addEventListener('click', () => {
window.location.href = article.link;
});
recommendedContainer.appendChild(articleElement);
});
} else {
console.error('State of Leonida article not found in pages.json');
}
})
.catch(error => console.error('Error fetching pages.json:', error));
// Функция для выбора случайных статей
function getRandomArticles(articles, count) {
return articles
.sort(() => 0.5 - Math.random()) // Перемешиваем статьи
.slice(0, count); // Берём первые `count` элементов
}
// Загрузка и отображение новостей
fetch('/articles.json')
.then(response => response.json())
.then(data => {
// Сортируем новости по дате (от самых новых к старым)
const sortedNews = data.sort((a, b) => new Date(b.date) - new Date(a.date));
const latestNews = sortedNews.slice(0, 3); // Берем три самых новых новости
const newsContainer = document.getElementById('latest-news');
latestNews.forEach(news => {
const newsItem = document.createElement('div');
newsItem.classList.add('latest-news-item');
newsItem.innerHTML = `
[img]${news.image}[/img]
[h4]${news.title}[/h4]
${news.date}
`;
// Добавляем ссылку на новость
newsItem.addEventListener('click', () => {
window.location.href = news.link; // Перенос на страницу новости
});
newsContainer.appendChild(newsItem);
});
})
.catch(error => console.error('Error fetching articles.json:', error));
// Событие для случайной статьи
document.getElementById('random-article').addEventListener('click', function() {
fetch('/pages.json')
.then(response => response.json())
.then(data => {
const randomArticle = data[Math.floor(Math.random() * data.length)];
window.location.href = randomArticle.link;
});
});
// Событие для случайной новости
document.getElementById('random-news').addEventListener('click', function() {
fetch('/articles.json')
.then(response => response.json())
.then(data => {
const randomNews = data[Math.floor(Math.random() * data.length)];
window.location.href = randomNews.link;
});
});
document.addEventListener('DOMContentLoaded', function () {
if (window.innerWidth
Подробнее здесь: [url]https://stackoverflow.com/questions/79314022/footer-overlapping-with-content-on-mobile-version[/url]