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

Problem z responsywnością strony internetowej

Object Storage Arubacloud
0 głosów
240 wizyt
pytanie zadane 30 marca 2023 w HTML i CSS przez metek19a Nowicjusz (220 p.)

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>

 

2 odpowiedzi

0 głosów
odpowiedź 30 marca 2023 przez Szarlotka Użytkownik (890 p.)
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;)
komentarz 30 marca 2023 przez metek19a Nowicjusz (220 p.)
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
0 głosów
odpowiedź 30 marca 2023 przez VBService Ekspert (254,490 p.)
edycja 30 marca 2023 przez VBService

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.

komentarz 30 marca 2023 przez metek19a Nowicjusz (220 p.)
Dzięki bardzo za podpowiedź!!!

Podobne pytania

0 głosów
0 odpowiedzi 88 wizyt
pytanie zadane 16 stycznia 2020 w HTML i CSS przez Łukasz Bombała Początkujący (300 p.)
0 głosów
1 odpowiedź 319 wizyt
pytanie zadane 17 grudnia 2019 w HTML i CSS przez Mariusz Podgórski Początkujący (400 p.)
0 głosów
1 odpowiedź 348 wizyt

92,662 zapytań

141,557 odpowiedzi

320,002 komentarzy

62,029 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...