Элементы создания потока документов и высоты сетки отображаются под сеткой. - PullRequest
Новая
       25

Элементы создания потока документов и высоты сетки отображаются под сеткой.

0 голосов
/ 11 июня 2018

Только что подобрал сетку, у меня возникают некоторые проблемы при просмотре сайта в мобильном телефоне.Если я установлю для сетки высоту 1200 пикселей, то все элементы после этого должны появиться в нормальном потоке документов, верно?

Так как же нам с этим справиться на мобильном устройстве, когда сетка растянута дальше, чем ее первоначальная высота?значение, потому что из того, что я испытываю, элемент после сетки следует за нормальным потоком документов и ожидает, что сетка будет завершена с разрешением 1200px, и в результате появится за элементом сетки.

Вот рисунок, иллюстрирующий, еслиКто-нибудь может пролить свет на это, было бы очень полезно, чтобы все пометили ниже также (обратите внимание на JS скрипку, эта «ошибка» не проявляется)

https://gyazo.com/1f3d18693c8df5a339fb5fdc09e8d2c6

HTML 

<!DOCTYPE html>
<html lang="" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Divine Tofu - Vegan Art and Apparel</title>
      <link rel="stylesheet" href = "style/style.css" type = "text/css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "js/menuscript.js"></script>

  </head>
  <body>

    <nav id="wrapper">
  <div class="sideSpacer">
      <div id="logoCont">
          <img id="logo" src="images/navicons/logo.png" alt="Devine Tofu Logo" />
          <div id="logoText"><img id = "logo" class="logotext" src="images/navicons/logotext.png"></div>
      </div>
      <div id="navWrapper">
          <ul>
              <a href="#apparel">
                  <li>Apparel</li>
              </a>
              <a href="#gal">
                  <li>Gallery</li>
              </a>
              <a href="#contactmetitle">
                  <li>Contact</li>
              </a>
              <a href="https://www.etsy.com/uk/shop/DivineTofu">
                  <li>Etsy Store</li>
              </a>
          </ul>
      </div>
      <div id="logoCont">
          <img id = "logo" class="logobot" src="images/navicons/bottomCircle.png" alt="Devine Tofu Logo" />
      </div>
      <div id="smWrap">
          <ul id="smItems">
              <li><img class="icon" src="images/navicons/fb.png" /></li>
              <li><img class="icon" src="images/navicons/insta.png" /></li>
              <li><img class="icon" src="images/navicons/twitter.png" /></li>
          </ul>
      </div>
  </div>


          <a href="https://www.etsy.com/uk/shop/DivineTofu">
                  Etsy Store
              </a>
</nav>

      <div id = "grid">
      <div id = "grid-item1">
          <h1>Commissions</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, felis ut tempus pulvinar, lorem urna imperdiet velit, ac semper lectus dolor at odio. Proin vitae sapien ex. Sed at varius diam. Fusce sit amet nulla lacinia, sodales leo eu, porta urna. Vestibulum rhoncus facilisis nisl vel dapibus. Vestibulum mollis egestas bibendum. Curabitur fringilla felis vitae nunc efficitur viverra. Nunc eleifend faucibus sodales. Donec libero magna, efficitur vel nisi non, tempus tincidunt quam.</p>
        <!-- Slider -->
          <img src = "images/Gallery/gallery3.png">
      </div>

      <div id = "grid-item2">

          <h1>Warcraft Chibis</h1>
          <br>
          <p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
      </div>

      <div id = "grid-item3">
         <img src = "images/chibi/tcomm5.png" id = "imgtrans">
         <img src = "images/chibi/tcomm1.png" id = "imgtrans">
         <img src = "images/chibi/tcomm3.png" id = "imgtrans">
         <img src = "images/chibi/tcomm2.png" id = "imgtrans">
         <img src = "images/chibi/tcomm7.png" id = "imgtrans">
         <img src = "images/chibi/tcomm10.png" id = "imgtrans">
      </div>

      <div id = "grid-item4">
          <br>
         <h1>Original Artwork</h1>
          <br>
          <p>Sed commodo turpis in nulla ultricies, ac volutpat turpis tristique. Sed a turpis dictum, posuere arcu sit amet, sodales eros. Maecenas in eleifend lacus. Phasellus mattis eros et justo egestas pharetra. Etiam ac tortor ut orci dapibus laoreet.</p>
      </div>

       <div id = "grid-item5">
         <img src = "images/Gallery/icongall1.png" id = "imgtrans">
         <img src = "images/Gallery/icongall6.png" id = "imgtrans">
         <img src = "images/Gallery/icongall3.png" id = "imgtrans">
         <img src = "images/Gallery/icongall4.png" id = "imgtrans">
         <img src = "images/Gallery/icongall5.png" id = "imgtrans">
         <img src = "images/Gallery/icongall2.png" id = "imgtrans">
      </div>
      </div>
<!--This is the red bar -->
      <div class = "aftergrid"> </div>
  </body>
</html>

CSS 

*{
    box-sizing: border-box;
}

.aftergrid {
  width: 100%;
  height: 40px;
  background-color: red; 
}

#grid {
  margin: 0 auto;
 display: grid;
 max-width: 100%;
 height:1200px;
 grid-template-columns:  repeat(1, 1fr);
 grid-template-rows: repeat(8,1fr);
 grid-gap: 5px 5px;
}

#grid div {
        background-color: hsla(126, 100%, 100%, 0.63);
    box-shadow: 0px 20px 250px 10px #fffdd0 inset;
}

#grid:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.fixed-width {
    max-width: 90%;
    margin:0 auto;
}

h1 {
    text-align: center;
}


#grid-item1{
    background-color: aliceblue;
    text-align: center;
}

#grid-item1 p{
    position: relative;
    margin-bottom: 1em;
    padding: 1em;
    animation-name: fadeinleft;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;

}

#grid-item1 h1 {
    position: relative;
    animation-name: fadeinright;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;

}

@keyframes fadeinleft{

    0% {left:-50px;
        opacity: 0;
        }

    80% {left: 10px;
    }

    100% {left:0px;
    opacity: 1;}

}

@keyframes fadeinright {

    0% {left:50px;
        opacity: 0;
        }

    80% {left: -10px;
    }

    100% {left:0px;
    opacity: 1;}

}

#grid-item1>img{
    width: 80%;
}

#grid-item2{
    grid-row: 4/5;
    background-color: aliceblue;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#grid-item2 p {
    padding: 1em;
    display: flex;

}

#grid-item3{
    grid-row: 5/6;
    background-color: aliceblue;
        display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#grid-item4{
    grid-row: 6/7;
    background-color: aliceblue;
        display: flex;
    flex-direction: column;
    align-items: center;
}

#grid-item4 p {
    padding:1em;
}

#grid-item5{
    grid-row: 7/8;
    background-color: aliceblue;
            display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}


.icon {
    max-width: 80%;
    margin: 0 auto;
}

#imgtrans{
    width: 32%;
    transition: all .2s ease-in-out;
    padding: 5px;
    overflow: auto;
    position: relative;
    z-index: 3;
}

#imgtrans:hover{
  transform: scale(1.1);
}


#navWrapper ul li:hover {
  opacity: 1;
  filter: alpha(opacity=0.5);
  background-color: rgba(255, 74, 1, 0.54);
}

#navWrapper ul {
    margin: 0 auto;
    width:96%;
}

#navWrapper ul li {
    text-align: center;
    margin: 10px 5px 10px 0px;
    padding: 1%;
    color:white;
    opacity: 0.6;
    transition: background-color 0.25s, opacity 0.25s ease-in;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    width:98%;
    font-size: 28px;
    font-family: 'Shadows Into Light Two', cursive;
}

#navWrapper ul a {
 text-decoration: none;
}

#parallax {
    background-image: url(../images/parallaxbg.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    opacity: 0.1;
    height: 100%;
    width: 100%;
    z-index: 0;
    margin: 0 auto;
}

.sideSpacer {
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:220px;
  background-color: hsla(36, 100%, 50%, 0.80);
  z-index: 2;
  transition: width .5s ease-out;
}

.sideSpacer:hover {
  width:250px;
}

#flexcont{
  display: block;
}

#flexlist{
  height: 100%;
  transition: all 1s;
}

#navIcons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mobileLogo {
  width:100px;
  height: 100px;
}

.mobileNavButton {
  width: 50px;
  height: 50px;
  align-self: center;
  margin-right: 15px;
}

.mobileNavButton:hover {
  cursor: pointer;
}


#smWrap {
    width:100%;
}

#smItems{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

#smItems li{
    text-align: center;
    opacity: 0.6;
    width:66px;
    margin-bottom: 10px;
    transition: width 2s, opacity 0.25s ease-in;
}

#smItems li:hover {
    opacity: 0.9;
}

#logoCont{
  margin:0 auto;
  width:100%;
}

#logoCont{
  font-weight: bold;
  width: 100%;
  opacity: 0.8;
  color:white;
  transition: width 2s, opacity 0.5s ease-in;
}

#logoCont:hover {
  opacity: 1;
  filter: alpha(opacity=0.5);
}

#logo{
    max-width: 94%;
    margin-left:3%;
    margin-right:3%;
    margin-top: 5%;
}

#logoText {
  text-align: center;
}

.logobot{
    max-width: 80%;
    margin:10%;
    padding-top: 1em;
}

#topNav {
      width: 100%;
      background-color: hsla(36, 100%, 50%, 0.80);
}


/* Tablet */

@media only screen and (min-width: 500px) {

     #grid {
        max-width: 90%;
         margin: 0 auto;

}

    .fixed-width {
        width: 80%;
        margin: 0 auto;
    }


} 

@media only screen and (max-width: 900px){
  .sideSpacer {
    display:none;
  }
}

/* Desktop */



@media only screen and (min-width: 900px) {

    #grid {
        width: 70%;
 grid-template-columns:  repeat(8, 1fr);
 grid-template-rows: repeat(12,1fr);
    grid-gap: 5px 5px;
        margin-left: 25%;
    }

    #grid-item1{
    grid-row: 2/12;
    grid-column: 5/9;
    background-color: aliceblue;
}

    #grid-item2{
    grid-row: 1/4;
    grid-column: 1/4;
    background-color: aliceblue;

}

       #grid-item3{
    grid-row: 4/7;
    grid-column: 1/4;
    background-color: aliceblue;

}

           #grid-item4{
    grid-row: 7/10;
    grid-column: 1/4;
    background-color: aliceblue;
}

               #grid-item5{
    grid-row: 10/13;
    grid-column: 1/4;
    background-color: aliceblue;
}

#topNav {
  display: none;
}

      .aftergrid {
        margin-top: 25px; 
    }


}

1 Ответ

0 голосов
/ 11 июня 2018

Я решил это, я должен был использовать высоту авто все время.

...