UniqueSoft/Phantom
2
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b680c5aecaab5ef17284a33ed1ff0bb5a2a6a9df
Phantom/website/DESKTOP-FIX.md

11 KiB
Raw Blame History

🖥️ DESKTOP GRID FIX - Исправление проблемы с колонками

🚨 Проблема

Симптомы:

  • На компьютерах (1366px, 1920px) все блоки отображаются в столбик (как на мобилке)
  • Bootstrap Grid не работает на десктопе
  • Все колонки .col-md-6, .col-lg-4 идут друг под другом вместо того, чтобы быть в ряд

Причина:

  • Конфликт между Bootstrap 5.3.2 и custom CSS
  • responsive.css был слишком агрессивный и перекрывал Bootstrap grid
  • Не было явных !important правил для принудительного включения flexbox на десктопе

✅ Решение

1. Создан файл css/desktop-fix.css (9 KB)

Что он делает:

  • Принудительно включает Bootstrap Grid на экранах 992px и больше
  • Добавляет !important ко всем grid-правилам
  • Гарантирует что .row всегда display: flex
  • Гарантирует что .col-* имеют правильные flex и max-width значения

Ключевые правила:

@media (min-width: 992px) {
    /* Строки всегда flex */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    /* Колонки работают правильно */
    .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

2. Добавлен к ВСЕМ страницам

Файл подключен после style.css но перед responsive.css:

<!-- Порядок загрузки CSS (ВАЖНО!) -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/desktop-fix.css">    <!-- НОВЫЙ -->
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/vendor-prefixes.css">
<link rel="stylesheet" href="css/visual-fixes.css">

Обновленные страницы:

  • ✅ index.html
  • ✅ docs.html
  • ✅ download.html
  • ✅ architecture.html
  • ✅ community.html
  • ✅ about.html

📐 Что теперь работает

Desktop (992px+)

Hero Section - 2 колонки

<div class="row">
    <div class="col-lg-6">Текст слева</div>
    <div class="col-lg-6">Изображение справа</div>
</div>

Результат: 50% | 50% (в ряд)

Features Section - 3 колонки

<div class="row">
    <div class="col-lg-4">Карточка 1</div>
    <div class="col-lg-4">Карточка 2</div>
    <div class="col-lg-4">Карточка 3</div>
</div>

Результат: 33% | 33% | 33% (в ряд)

Stats Section - 4 колонки

<div class="row">
    <div class="col-lg-3">Статистика 1</div>
    <div class="col-lg-3">Статистика 2</div>
    <div class="col-lg-3">Статистика 3</div>
    <div class="col-lg-3">Статистика 4</div>
</div>

Результат: 25% | 25% | 25% | 25% (в ряд)

🧪 Тестирование

Как проверить что всё работает:

  1. Откройте index.html в браузере
  2. Нажмите F12 (Developer Tools)
  3. Измените ширину экрана:
    • 1920px → Должно быть 3-4 колонки в ряд
    • 1366px → Должно быть 3 колонки в ряд
    • 768px → Должно быть 1-2 колонки (планшет)
    • 375px → Должна быть 1 колонка (мобилка)

Проверка grid в DevTools:

/* Откройте инспектор элемента и проверьте .row */
.row {
    display: flex; /* ✅ Должно быть flex */
    flex-wrap: wrap; /* ✅ Должно быть wrap */
}

/* Проверьте .col-lg-6 */
.col-lg-6 {
    flex: 0 0 50%; /* ✅ Должно быть 50% */
    max-width: 50%; /* ✅ Должно быть 50% */
}

🔧 Breakpoints после исправления

Разрешение Описание Grid поведение
1920px+ Full HD Desktop 3-4 колонки в ряд
1366px-1919px HD Laptop 2-3 колонки в ряд
992px-1365px Small Desktop 2 колонки в ряд
768px-991px Tablet 1-2 колонки
<768px Mobile 1 колонка (столбик)

🎯 Специальные исправления для Phantom Protocol

1. Hero Section

@media (min-width: 992px) {
    .hero-section .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

2. Features Grid

@media (min-width: 992px) {
    .features-grid .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

3. Stats Section

@media (min-width: 992px) {
    .hero-stats .col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

4. Footer Columns

@media (min-width: 992px) {
    .footer .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

🚀 Дополнительные utility классы

desktop-fix.css также добавляет Bootstrap utility классы для desktop:

Display Utilities

<div class="d-lg-flex">Flex на desktop</div>
<div class="d-lg-none">Скрыть на desktop</div>
<div class="d-lg-block">Block на desktop</div>

Flex Utilities

<div class="flex-lg-row">Ряд на desktop</div>
<div class="justify-content-lg-between">Space-between</div>
<div class="align-items-lg-center">Выравнивание по центру</div>

Spacing Utilities

<div class="mt-lg-5">Большой margin-top на desktop</div>
<div class="p-lg-4">Padding на desktop</div>

Text Utilities

<p class="text-lg-center">Центрирование на desktop</p>
<p class="text-lg-left">Слева на desktop</p>

⚠️ Важные замечания

1. Порядок подключения CSS критичен!

ПРАВИЛЬНО:

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/desktop-fix.css">
<link rel="stylesheet" href="css/responsive.css">

НЕПРАВИЛЬНО:

<link rel="stylesheet" href="css/desktop-fix.css">
<link rel="stylesheet" href="css/style.css">  <!-- Перекроет desktop-fix -->

2. !important необходим

Без !important другие стили будут перекрывать grid правила.

3. Проверяйте в нескольких браузерах

  • ✅ Chrome 90+
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Edge 90+

📊 Размер файла

  • desktop-fix.css: 9 KB
  • Влияние на загрузку: минимальное (~0.01 секунды на 10 Мбит/с)
  • Gzip сжатие: ~2 KB

🐛 Отладка

Если grid всё ещё не работает:

1. Откройте DevTools (F12)

2. Проверьте что desktop-fix.css загружен

// В консоли браузера
document.styleSheets[2].href
// Должно содержать "desktop-fix.css"

3. Проверьте computed styles для .row

// Выберите .row в Elements tab
getComputedStyle(document.querySelector('.row')).display
// Должно быть "flex"

4. Временно включите отладочные границы

Раскомментируйте в конце desktop-fix.css:

@media (min-width: 992px) {
    .row {
        border: 1px solid rgba(0, 240, 255, 0.1) !important;
    }
    
    [class*="col-"] {
        border: 1px solid rgba(122, 62, 255, 0.1) !important;
    }
}

Это покажет границы всех row и колонок.

✅ Checklist после применения fix

  • ✅ desktop-fix.css создан
  • ✅ Добавлен ко всем 6 HTML файлам
  • ✅ Добавлен ПОСЛЕ style.css но ПЕРЕД responsive.css
  • ✅ На десктопе (1366px+) колонки в ряд
  • ✅ На планшете (768px) колонки в 1-2 ряда
  • ✅ На мобилке (<768px) колонки в столбик
  • ✅ Навигация работает
  • ✅ Footer в несколько колонок на desktop
  • ✅ Features cards в 3 колонки на desktop
  • ✅ Hero section в 2 колонки на desktop

📚 Связанные файлы

  • css/desktop-fix.css - Новый файл с исправлениями
  • css/style.css - Базовые стили (без изменений)
  • css/responsive.css - Мобильные стили (без изменений)
  • css/vendor-prefixes.css - Кроссбраузерность (без изменений)
  • css/visual-fixes.css - Визуальные исправления (без изменений)

🎉 Результат

До исправления:

Десктоп (1920px):
┌────────────────┐
│   Блок 1       │
├────────────────┤
│   Блок 2       │
├────────────────┤
│   Блок 3       │
└────────────────┘
❌ Всё в столбик

После исправления:

Десктоп (1920px):
┌─────┬─────┬─────┐
│ Блок│ Блок│ Блок│
│  1  │  2  │  3  │
└─────┴─────┴─────┘
✅ В ряд (как надо!)

🔄 Обновления

  • 2025-01-XX: Создан desktop-fix.css
  • 2025-01-XX: Добавлен ко всем 6 страницам
  • 2025-01-XX: Протестировано на 1366px, 1920px
  • 2025-01-XX: Подтверждена работа grid на всех страницах

💡 Для разработчиков

Если вы хотите изменить breakpoint для desktop grid:

/* Измените 992px на другое значение */
@media (min-width: 1200px) { /* Вместо 992px */
    .row {
        display: flex !important;
        /* ... */
    }
}

Стандартные Bootstrap breakpoints:

  • 576px - Small (sm)
  • 768px - Medium (md)
  • 992px - Large (lg) ← МЫ ИСПОЛЬЗУЕМ
  • 1200px - Extra Large (xl)
  • 1400px - Extra Extra Large (xxl)

Проблема решена! 🎉

Теперь на компьютерах все блоки отображаются в правильном grid layout, а не в столбик.

Reference in New Issue View Git Blame Copy Permalink