• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywna strona z grid'em

+2 głosów
82 wizyt
pytanie zadane 12 kwietnia w HTML i CSS przez Nearr Obywatel (1,860 p.)
edycja 12 kwietnia przez Nearr
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Naxis.io</title>
    <meta name="description" content="A game where you eat other players and get bigger to eat even more players" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=deive-width, initial-scale=2.0, initial-scale=1.0">

    <link rel="stylesheet" href="main.css"/>
</head>

<body>

    <div id="overlay">
        <div class="main-box">
            <div id="profile-menu" class="user-boxes" ></div>
            <div id="skin-list" class="user-boxes" ></div>
            <div id="user-menu" class="user-boxes" ></div>
            <div id="server-list" class="user-boxes" ></div>
        </div>
    </div>

</body>
</html>
body {
    background-color: rgb(36, 36, 36);
}

* {
    box-sizing: border-box;
}

#overlay {
    width: 1000px;
    padding: 10px;
    margin: auto;
}

.main-box {
    position: absolute;
    display: grid;
    grid-template-columns: 320px 340px 280px;
    grid-template-rows: 70px 146px 302px 250px;
    grid-gap: 14px;
    top: 16%;
}

#server-list {
    width: 280px;
    height: 462px;
    grid-column: 3;
    grid-row: 2;
  }
  
  #user-menu {
    width: 340px;
    height: 462px;
    grid-column: 2;
    grid-row: 2;
    
  }
  
  #profile-menu {
    width: 320px;
    height: 146px;
    grid-column: 1;
    grid-row: 2;
  }
  
  #skin-list {
    width: 320px;
    height: 302px;
    grid-column: 1;
    grid-row: 3;
  }
  
  .user-boxes {
    border-radius: 3px;
    background-color: rgba(20, 20, 20, 0.918);
    box-shadow: 0 0 4px 1px #0a0a0a;
  }
  

@media screen and (max-width: 1024px) {
    #overlay {
        width: 100%;
    }

    .main-box {
        width: 100%;
    }

    .user-boxes {
        width: 100%;
        margin: 10px 0px;
        color: #fff;
    }
}

Witam,

Robię grę, i postanowiłem od nowa zrobić strukturę strony, że uczynić ją responsywną.

Z grid'a bardzo fajnie mi się korzysta, ale niestety nie wiem jak zrobić responsywną stronę z jego użyciem.

Przed dodaniem grid'a struktura strony była responsywna, niestety po dodaniu już nie.

2 odpowiedzi

+1 głos
odpowiedź 12 kwietnia przez VBService VIP (137,390 p.)
edycja 12 kwietnia przez VBService
 
Najlepsza

Tak jak wspomniał @niezalogowany  -> @media  wink                                       

<div class="grid-container">
  <div class="box-left"><p><-- Przesuń belkę</p></div>
  <div class="box-middle"></div>
  <div class="box-right"></div>
</div>
* {
  box-sizing: border-box;  
}
html, body, .grid-container {
  margin: 0;
  height: 100vh;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1em;
  grid-template-areas:
    "box-left box-middle box-right";

  width: 90vw;
  margin: 0 auto;
}

.box-left { 
  grid-area: box-left;
  background-color: red;
}
.box-middle { 
  grid-area: box-middle;
  background-color: green;
}
.box-right { 
  grid-area: box-right; 
  background-color: blue;
}

@media all and (max-width: 720px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "box-left"
      "box-middle"
      "box-right";
  }
}

/* ------ prezentacja ------ */
.grid-container * {
  position: relative;
  height: 100%;
}
.grid-container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
}

 

2
komentarz 12 kwietnia przez Nearr Obywatel (1,860 p.)
dziękuję :)
1
komentarz 12 kwietnia przez niezalogowany

@VBService,
 laughyes

+2 głosów
odpowiedź 12 kwietnia przez niezalogowany
1
komentarz 12 kwietnia przez Nearr Obywatel (1,860 p.)
dziękuję :)

Podobne pytania

0 głosów
2 odpowiedzi 133 wizyt
pytanie zadane 10 września 2015 w HTML i CSS przez tirex Gaduła (4,430 p.)
0 głosów
1 odpowiedź 61 wizyt
pytanie zadane 6 listopada 2020 w HTML i CSS przez fff Gaduła (3,950 p.)
0 głosów
3 odpowiedzi 1,333 wizyt
pytanie zadane 20 października 2016 w HTML i CSS przez kieryk123 Początkujący (300 p.)

85,802 zapytań

134,588 odpowiedzi

298,790 komentarzy

56,697 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 494p. - rucin93
  2. 482p. - CC PL
  3. 463p. - nidomika
  4. 385p. - Whistleroosh
  5. 379p. - ScriptyChris
  6. 372p. - adrian17
  7. 340p. - TheLukaszNs
  8. 339p. - WhiskeyTaster
  9. 321p. - Argeento
  10. 318p. - Dagohar
  11. 287p. - Anonim 1794483
  12. 281p. - Klaudia
  13. 278p. - B4mbus
  14. 269p. - b0mbix
  15. 246p. - tokox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...