Сетка CSS с использованием DIV, которая работает на локальном сервере, не работает при загрузке на сайт Django

Я пытаюсь создать сетку CSS, используя DIV для отображения строки из 3 полей.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html { font-size: 22px; }
    body { 
      padding: 1rem; 
      background-color: rgba(2, 26, 63);
    
    }

    .card {
      background-color: rgba(24,109,238, 0.7);
      transition: 0.5s;
      border-radius: 10px;
      color: white;
      padding: 1rem;
      height: 4rem;
    }

    .card:hover{
    box-shadow: 0 0 20px 0px rgba(80, 230, 236, 0.8);
    }

    .card h3{
        text-align: center;
    }

    .cards {
      max-width: 800px;
      margin: 0 auto;
      display: grid;
      grid-gap: 1rem;
      font-size: small;
    }

    /* Screen larger than 600px? 2 column */
    @media (min-width: 600px) {
      .cards { grid-template-columns: repeat(2, 1fr); }
    }

    /* Screen larger than 900px? 3 columns */
    @media (min-width: 900px) {
      .cards { grid-template-columns: repeat(3, 1fr); }
    }
  </style>

</head>
<body>
    <Div class="cards">
        <Div class="card" onclick="window.location='opnotener'">
            <h3>NLP-NER 4 Op Notes</h3>
            <P>Natural Lanugage Processing - Named Entity Rrecognition tool for surgical Procedure Notes.</P>
        </Div>
        <Div class="card" onclick="window.location='#'">
            <h3>Surgical EPR</h3>
            <P>Surgical EPR that covers the entire surgical landscape with sub-speciality pipeleines.</P>
        </Div>
        <Div class="card" onclick="window.location='opnoteannotator'">
            <h3>Op Note Annotator</h3>
            <P>Surgical procedure notes Annotator with drag and drop speciality specific entities.</P>
        </Div>
    </Div>

</body>
</html>

Предполагаемый результат должен быть таким, как показано ниже, и работает на локальном сервере.

Вывод на локальный сервер

Но мой вывод выглядит так, когда код загружается на хостинг (Django v3.2);

Вывод на хостинг - Django v 3.2

можешь скинуть ссылку на хостинг

The Duo 17.05.2022 14:36
medai.pythonanywhere.com/applications1.html
KevsAI 17.05.2022 17:38
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
2
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

я посетил вашу страницу.

добавить grid-template-columns: auto auto auto; в .applications-wrap класс и установите height:auto на .applications-col класс.

и ваш раздел .applications не по центру, поэтому, если вы хотите отцентрировать его, дайте мне знать.

Спасибо за совет. Это действительно решило мою проблему.

KevsAI 17.05.2022 18:46

Другие вопросы по теме