Problem z responsywnością strony internetowej

Question

Hey!

Zwracam się do was z takim problemem...

Otóż, zrobiłem stronę internetową ale nie mogę znaleźć rozwiązania jak usunąć czarną przestrzeń strony podczas sprawdzania użytkowania na urządzeniu mobilnym, stronę można przesunąć w prawo, dodatkowo obrazki wychodzą i pozostaje możliwość scrollowania w prawo i lewo.

Powinienem do obrazka i body dodać @media z max-width? czy jest jakieś inne rozwiązanie?

 

link do strony : https://patrykr124.github.io/festivalsite/

 

(jakby co footer i menu zostało zmienione dzięki @media ale z obrazkami oraz przewijania strony to nie naprawiło ;/ )

 

z góry dziękuję!!!

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}


body{
    overflow-x: hidden;
    background-color: black;
    color: white;
    font-family: poppins;
}
main{
width: 100vw;
height: 100vh;
}




video{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -1;
    
}

.menu{
    
    display: flex;
    position: fixed;
    justify-content: space-between;
    padding: 5px ;
    align-items:center;
    width: 100vw;
    background-color: rgb(0, 0, 0);
    top: 0px;
    z-index: 1;

    
    
    
    
    
    

}

.menu-bar{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    
    
    
    
}

.menu-bar-icon{
    display: flex;

    
    
    
    
}

.logo{
    font-size: 30px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    
}


span{
    background: linear-gradient(90deg,rgb(252, 3, 3),rgb(251, 255, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    
}

.bilety-span{
    background: linear-gradient(90deg,rgb(252, 3, 3),rgb(251, 255, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 1px solid red;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    transition: 0.15s ease-in-out;
    
    
    
    
    
    
    
    

    
}
.bilety-span:hover{
    background: linear-gradient(90deg,rgb(245, 253, 0),rgb(255, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-color: rgb(255, 242, 0);
   
    
}

a{
    display: flex;
    text-decoration: none;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.4s;
    letter-spacing: 2px;
    
    
    
}
a:hover{
    color: red;
    
    
    
}
li{
    display: inline-block;
    padding: 30px 40px;
    font-size: 25px;
    
    
    
}


.hidden{
    opacity: 0;
    transition: all 0.5s;
    filter: blur(5px);
    transform: translateX(-100%);
}
.hidden2{
    opacity: 0;
    transition: all 0.5s;
    filter: blur(5px);
    transform: translateX(100%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}




/* 2 strona */


section.page2{
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    display: block;
    z-index: -1;
    
    
    
}

div.main-site{
    width: 100%;
    text-align: center;
       

    
}

h1.text{
    font-size: 40px;
    padding: 50px;
    background: linear-gradient(90deg,rgb(252, 3, 3),rgb(251, 255, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

h2{
    
    font-size: 16px;
    padding: 20px;
    
    
}

h3{
    font-size: 40px;
    padding: 20px;
    background: linear-gradient(90deg,rgb(252, 3, 3),rgb(251, 255, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
p{
    padding: 5px;
    font-size: 16px;
    justify-content: center;
    margin: 50px;
}

/* 3 strona */

section.page3{
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
    display: block;
    z-index: -1;    
}

div.page3-item{
    width: 100%;
    text-align: center;
}

h1.lineup{
font-size: 40px;
color: red;

}
div.row{
    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;

    
    
}
div.container{
    
display: grid;
padding: 10px 20px;
margin: auto;



}

img {
width: 100%;
height: 600px;
object-fit: cover;
cursor: pointer;
transition: 0.3s ease;





}

img:hover{
    transform: scale(1.05);

}

.content{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    background-color: rgba(5, 0, 0, 0.698);
    opacity: 0;
    transition: 0.6s;
    
    
}
.content:hover{
    opacity: 1;
}
.content h1{
    font-size: 55px;
    color: white;
}

.artist{
    position: relative;
    width: 500px;
}


/* 3 */

h1.biletyh1{
    font-size: 40px;
    color: rgb(255, 0, 0);
}

section.page4{
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
    display: block;
    z-index: -1;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.506),rgba(53, 0, 0, 0.411));
}

.page4-item-container{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    

    
   
    
    

    

}

.bilety2, .bilety3, .bilety4{
    border: 2px solid rgb(255, 0, 0);
    display: block;
    justify-content: center;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    

    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s;
    filter: blur(5px);
    
    

}

.showbilety{
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);

}



.bilety2:hover, .bilety3:hover, .bilety4:hover{
    box-shadow: 0px 0px 50px red;
}

.biletyh2, .biletyh3, .biletyh4{
    font-size: 30px;
    align-items: center;
    justify-content: center;
    
    
   
}

p.price{
    font-size: 20px;
    
    
}

.price:hover{
    opacity: 1;
}



/* footer */



footer.footer-section{
    display: block;
    width: 100vw;
    height: 100vh;
    

    
    
    
    
    
}




.section-container-up{
    background-color: rgb(184, 138, 0);
    display: block;
    padding: 15px;
    margin: auto;
    
}

.section-container-left-icon{
    margin-left: 12%;
    
}

i{
    font-size: 30px;
    padding: 20px;
    display: flex;
    margin-right: 20px;
    cursor: pointer;
    transition: 0.4s ease-in-out;
    
}

i:hover{
    color: red;
    font-size: 32px;
}


ul li {
    padding: 20px;
    padding-left: 0;
    display: block;
    font-size: 18px;
}

.footer-col{
    width: 25%;
    padding: 50px 15px;
    display: block;
    

}


.footer-col h1{
    color: rgb(255, 0, 0);
    font-size: 35px;
    margin-bottom: 40px;
}

.row{
    display: flex;
    flex-wrap: wrap;
}

.footer-container-down{
    max-width: 1320px;
    margin: auto;
}


@media(max-width: 767px){
    .footer-col{
        width: 50%;
        margin-bottom: 30px;

        
       
    }
}

@media(max-width: 574px){
    .footer-col{
        width: 100%;
    }
}

@media(max-width: 1100px){
    .footer-col{
        width: 100%;
    }
}

















 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Festival Site</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://kit.fontawesome.com/488201f8b9.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css" />
    
  </head>
  <body>
    <main>
      <section id="home">
        <video autoplay loop muted plays-inline class="video-background">
          <source src="./files/Rolling Loud Miami 2019 Aftermovie.mp4" type="video/mp4" />
        </video>
      </section>
      <nav>
        <div class="menu">
            <div class="logo">
              <a href="#home"><h1><span>Festival</span> Road</h1></a>
            </div>
            <div class="menu-bar">
                <ul class="menu-bar-icon">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#info">INFO</a></li>
                    <li><a href="#lineup">LINE-UP</a></li>
                    <li><a href="#bilety"><span class="bilety-span">BILETY</span></a></li>
                </ul>
            </div>
        </div>
      </nav>
    </main>
    <section id="info" class="page2">
        <div class="main-site">
            <h1 class="text">THE POWER OF CLOUT!</h1>
            <p class="hidden">Przed Wami druga edycja jedynego WORLDWIDE RAP FESTIWALU w Polsce!
                100% TRAP and URBAN ARTISTS.
                Na premierowej edycji CLOUT 22 w zeszłym roku, wystąpili dla Was między innymi:</p>
            <h2 class="hidden">DABABY - FERG - JACK HARLOW - LIL PUMP - FIVIO FOREIGN - KEY GLOCK - CITY MORGUE - SOFAYGO - DDG - UNOTHEACTIVIST - LANCEY FOUX - FAT NICK</h2>
            <p class="hidden">oraz polscy artyści nowej fali.</p>
            <h3 class="hidden2">W TYM ROKU PRZYGOTUJCIE SIĘ NA UPGRADE!</h3>
            <p class="hidden2">Przed Wami CLOUT 2.0!</p>
            <p class="hidden2">Tym razem lecimy cały weekend! 8-9 lipca 2023, w ulepszonej formule i nowej lokalizacji, w samym centrum Warszawy, przy ulicy Łazienkowskiej, na terenie otaczającym Stadion Miejski, wystąpi kilkunastu wpływowych, międzynarodowych artystów!</p>
        </div>
    </section>
    <section id="lineup" class="page3">
      <div class="page3-item">
        <h1 class="lineup">LINE UP</h1>
      </div>
      <div class="container">
        <div class="row">
          <div class="artist">
            <img src="./files/1db2762a8ebb423ff6a40b84e7db27aa.jpg">
            <div class="content">
              <h1>Juice Wrld</h1>
            </div>
          </div>
          <div class="artist">
            <img src="./files/3e0064bbe4d5f1c7d259aa914e842358.jpg">
            <div class="content">
              <h1>Drake</h1>
            </div>
          </div>
          <div class="artist">
            <img src="./files/4b444b6bd4393100338e799e7a3ee072.jpg">
            <div class="content">
              <h1>XXXTENTACION</h1>
            </div>
          </div>
          <div class="artist">
            <img src="./files/744443b01acf3891e8f704deca1a90f6.jpg">
            <div class="content">
              <h1>FUTURE</h1>
            </div>
          </div>
          <div class="artist">
            <img src="./files/438240b2d0d9f96b3cd88e91fd3ea453.jpg">
            <div class="content">
              <h1>Lil Baby</h1>
            </div>
          </div>
          <div class="artist">
            <img src="./files/dba47c8a285340cd7d1709c27533fd7e.jpg">
            <div class="content">
              <h1>Migos</h1>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="bilety" class="page4">
      <div class="page3-item">
        <h1 class="biletyh1">BILETY</h1>
      </div>
      <div class="page4-item-container">
        <div class="bilety2">
          <h2 class="biletyh2">Standardowy</h2>
          <div class="pricediv">
          <p class="price">100zł</p>
          </div>
        </div>
        <div class="bilety3">
          <h2 class="biletyh3">Standardowy + surprise</h2>
          <div class="pricediv">
          <p class="price">200zł</p>
        </div>
        </div>
        <div class="bilety4">
          <h2 class="biletyh4">VIP</h2>
          <div class="pricediv">
          <p class="price">400zł</p>
        </div>
        </div>
      </div>
    </section>
    <footer class="footer-section">
      <div class="section-container-up">
        <div class="section-container-left-icon">
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-facebook"></i>
        </div>
      </div>
      <div class="footer-container-down">
        <div class="row">
          <div class="footer-col">
            <h1>Info</h1>
            <ul>
              <li><a href="#">Regulamin</a></li>
              <li><a href="#">Polityka prywatności</a></li>
              <li><a href="#">FAQ</a></li>
              </ul>
          </div>
          <div class="footer-col">
            <h1>Contact</h1>
            <ul>
              <li><a href="#">festival@gmail.com</a></li>
            </ul>
          </div>
          <div class="footer-col">
            <h1>Miejsce</h1>
            <ul>
              <li><a href="#">Gdynia, świętojańska 4</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
     


    

    <script src="script.js"></script>
  </body>
</html>

 

Answer 1

Jeżeli chcesz sprawdzić co Ci psuje stronę, to daj dla gwiazdki (*) border:1px solid red. To Ci powinno pokazać jaki element/elementy sprawiają, że można stronę scrollować w prawo.
Zauważyłam też, że używasz dużo width:100vw - to może być jeden z powodów.

I nic dziwnego, że zostaje Ci taka duża przerwa między głównym zdjęciem na stronie, skoro masz ustawiony height na 100vh;)

Comments

Dzięki bardzo za podpowiedź!!!

Wiem już w czym był problem...

1 solid red pomógł haha

Jeśli kogoś to ciekawi to animacja na tekście mimo że był nie widoczny to leciał od dalekiego prawego do centrum strony dlatego powstała taka duża przestrzeń.

dodałem do Diva tekstu overflow-x : hidden i działa :D

Answer 2

usunąć czarną przestrzeń

usuń height

footer.footer-section {
    display: block;
    width: 100vw;
    /* height: 100vh; */
}

 

spróbuj dopisać do @media np.

@media(max-width: 574px){
    main {
        height: 100%;
    }
    .menu{
        flex-direction: column;
    }
    video {
        position: relative;
        top: 12vh;
        height: auto;
    }
    .artist{
        width: 100%;
    }
    div.row {
        flex-direction: column;
    }
    .footer-col{
        width: 100%;
    }
}

@media(max-width: 767px){
    ...
}
 
@media(max-width: 1100px){
    ...
}

 

@media(max-width ...) dla bardziej czytelnej struktury kodu można posortować je od najmniejszej do największej.

Comments

Dzięki bardzo za podpowiedź!!!