Tworzenie strony - problem z responsywnością

1	komentarz 1 października 2016 przez ScriptyChris Mędrzec (190,190 p.) Pokaż nam kod strony => http://forum.pasja-informatyki.pl/faq#jak-wstawic-kod-zrodlowy

komentarz 2 października 2016 przez Jack9999 Początkujący (300 p.)



    <div class="wrap">
        <div class="loading">
            <div class="bounceball"></div>
            <div class="text">LOADING BHAGASKARA.</div>
        </div>
    </div>
    <header class="col-6">
        <div class="header-effect">
            <div class="holder">
                <div class="header1">
                    <img src="images/bigLogo.png" alt="Bhagaskara." />
                </div>
                <div class="header2">
                    <h2>Aut tam ignis qui omnia autho patet.</h2>
                    <p>
                        Vim veluti cur agi florum augeri. Synopsis du adverten re assidere de occurrat. Im immortalem denegassem operatione credidisse si. Fal cui consortio requirunt attingere approbent mox obstinate similibus.
                    </p>
                </div>
                <div class="header3">
                    <div class="item-holder">
                        <a href="#">
                            <div class="item">
                                <img src="images/settings.png" alt="about" />
                                <h3>About</h3>
                            </div>
                        </a>
                        <a href="#">
                            <div class="item">
                                <img src="images/head.png" alt="Team" />
                                <h3>Team</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="header4">
                    <div class="item-holder">
                        <a href="#">
                            <div class="item">
                                <img src="images/bubble.png" alt="Services" />
                                <h3>Services</h3>
                            </div>
                        </a>
                        <a href="#">
                            <div class="item">
                                <img src="images/book.png" alt="Porfolio" />
                                <h3>Portfolio</h3>
                            </div>
                        </a>
                    </div>
                    <div class="item-holder">
                        <a href="#">
                            <div class="item">
                                <img src="images/pen.png" alt="Blog" />
                                <h3>Blog</h3>
                            </div>
                        </a>
                        <a href="#">
                            <div class="item">
                                <img src="images/paperplane.png" alt="Kontakt" />
                                <h3>Kontakt</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="header5">
                    <div class="look-down">
                        <p>
                            &gt;
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <nav class="col-6">
        <div class="holder">
            <div class="left-nav">
              <img src="images/smallLogo.png" alt="Bhagaskara logo" />
            </div>
            <div class="right-nav">
              <ul>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>Home</li></a>
              </ul>
            </div>
        </div>
    </nav>

Powyżej kod HTLM a poniżej SCSS

@import "assets/reset";
@import "assets/variables";
@import "assets/grid";
@include grid-system(6, 1366px, 0, 900px);
@import  url('https://fonts.googleapis.com/css?family=Montserrat');
@keyframes scrollAnimate {
    0% {
        margin-bottom: -5px;
    }
    50% {
        margin-bottom: 5px;
    }
    100% {
        margin-bottom: -5px;
    }
}
//loading animation
@keyframes bounce {
  0% {
    top: $bounce_height;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: $animHeight;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}
//loading divs
.wrap {
  width: 100%;
  height: 100vh;
  font-family: 'Montserrat';
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  color: #9f449b;
  display: inline-block;
  margin-left: 5px;
}

.bounceball {
  position: relative;
  display: inline-block;
  height: 37px;
  width: $animWidth;
  &:before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    width: $animWidth;
    height: $animHeight;
    border-radius: 50%;
    background-color: #9f449b;
    transform-origin: 50%;
    animation: bounce 500ms alternate infinite ease;
  }
}
//end of animation
//holder for all site
.holder {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  //for smaller width
  @media (max-width: 1024px) {
    width: 100%;
    margin: 0;
  }
}
//end of holder
a {
  text-decoration: none;
}
.item {
  width: 20vh;
  height: 20vh;
  background-image: url('../images/bigWhiteHex.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: $mainFont;
  color: $secondaryColor;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @media (max-width: 720px) {
    width: 25vh;
    width: 25vh;
  }
  img {
    width: 40%;
    height: 40%;
    @media (max-width: 720px) {
      width: 30%;
      height: 30%;
    }
  }
  h3 {
    margin-top: 5px;
    @media (max-width: 720px) {
      font-size: 0.7em;
    }
  }
  &:hover {
    background-image: url("../images/hover-hexagon.png");
  }
}
.item-holder {
  width: 30%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}
//main content
header {
  width: 100%;
  height: 100vh;
  background-image: url('../images/img1_01.jpg');
  background-size: 100% 100%;
  .header-effect {
    width: 100%;
    height: 100%;
    background-color: $mainColorRGBA;
    .holder {
      .header1 {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        @media (max-width: 720px) {
          height: 15%;
        }
        img {
          width: 40vh;
          height: 10vh;;

        }
      }
      .header2 {
        width: 100%;
        height: 20%;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        font-family: $mainFont;
        color: $secondaryColor;
        @media (max-width: 720px) {
          height: 25%;
        }
        h2 {
          font-family: $secondaryFont;
          height: 40%;
          font-size: 2.5em;
          letter-spacing: 1px;
          @media (max-width: 720px) {
            font-size: 1em;
            height: 30%;
          }
        }
        p {
          width: 80%;
          height: 60%;
          margin: 0 auto;
          font-weight: 300;
          @media (max-width: 720px) {
            width: 90%;
            font-size: .9em;
            height: 70%;
          }
        }
      }
      .header3 {
        width: 100%;
        height: 20%;
      }
      .header4 {
        width: 100%;
        height: 20%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .item-holder {
          margin: 0;
        }
      }
      .header5 {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: flex-end;;
        .look-down {
          width: 8vh;
          height: 8vh;
          background-image: url('../images/white-hexSmall.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $secondaryColor;
          font-family: $mainFont;
          font-size: 1.5em;
          margin-bottom: 2%;
          @media (max-width: 720px) {
            width: 10vh;
            width: 10vh;
            font-size: .8em;
          }
          p {
            transform: rotate(90deg);
            animation-name: scrollAnimate;
            animation-duration: 1s;
            animation-iteration-count: infinite;
          }
        }
      }
    }
  }
}
nav {
  width: 100%;
  height: 10vh;
  background-color: $secondaryColor;
}