Skocz do zawartości

Problem z responsywnością strony internetowej


metek19a

Recommended Posts

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>

 

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...