Witam, pracuję nad uczynieniem reagowania mojej strony i za pomocą zapytań multimedialnych. Mam najtrudniejszy czas dowiedzieć się, dlaczego mój drugi obraz nie zmieni się, gdy zmniejszam rozmiar przeglądarki.

W html "Top-background-Image" jest ustawiony jako zdjęcie tła dla tego DIV i "Profil-Pic" to po prostu zdjęcie na szczycie tego zdjęcia tła. W regularnym ekranie wszystko wygląda pięknie i świetnie, ale bez względu na zmiany wprowadzam do "profilu-pic" w zapytaniu medialnym, nie zmienia się w ogóle.

Inną kwestią, kiedy dokonuję zapytań multimedialnych zmienia się w "Baker" i "Joe", nawet jeśli mam centrum wyrównania tekstu, tekst nie jest wyśrodkowany na ekranie, gdy rozmiar przeglądarki jest zmniejszony.

Proszę pomóż! :)

Oto kod HTML:

  <div >
      <div >
      <img className="top-background-image" src="**image1.jpg**" alt="background-image"/>
      </div>
      <div className = "top-container">
      <h1 className = "joe animate__animated animate__fadeInLeftBig ">Hi, I'm Joe.</h1><span><h2 className="baker animate__animated animate__fadeInRightBig animate__delay-1s" >a baker for you.</h2></span>
      <img className ="profile-pic animate__animated animate__fadeInUpBig animate__delay-2s"src="**image2**.jpg" alt="profile"/>
      <a className = "scroll" href="#middle-container"><FontAwesomeIcon className="social-icon" icon={faAngleDoubleDown} bounce size = '2x' color = "white"/></a>
      </div>
    </div>  

A oto CSS:

    .top-background-image {
  position: relative;
  filter: blur(4px);
  -webkit-filter: blur(4px);
  width: 1600px;
  height: 800px;
  margin-bottom: 10px;
} 

      .top-container {
      display: flex;
      justify-content: center;
      text-align: center;
    }


   .joe {
  font-family: "Droid+Sans";
  font-weight: normal;
  color: #ffffff ;
  font-size: 7rem;
  position: absolute;
  top: 17%;
  left: 32%;
}

.baker {
  font-family: 'Satisfy', cursive;
  font-weight: normal;
  color: #ffffff;
  position: absolute;
  top: 37%;
  right: 21%;
}

.profile-pic { 
  display: inline-block; 
  height: auto; 
  width: 250px;
  border-radius: 50%;
  position: absolute;
  top: 48%;
  left: 43%;
  margin: auto;
  display: block;
  
}

I tutaj znajduje się w zapytaniu medialnym ....

@media (max-width: 900px){

 .top-background-image {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    width: 100%;
}

      .joe {
        font-size: 3.5rem;
        margin: 0 auto;
      text-align: center;
        
      }
    
    .baker {
      text-align: center;
      margin: 0 auto;
      font-size: 1.5rem;
     
    }
    
      .profile-pic {
        display: block;
        margin: 0 auto;
        width: 150px;
      width: 150px;
      }

}
0
Mamdlv 27 październik 2020, 02:50

1 odpowiedź

Najlepsza odpowiedź

Po skrzypniu wokół udało mi się znaleźć odpowiedź. Okazuje się w moim przypadku, którego potrzebowałem, aby dodać "ekran i" po @medii, aby wyglądało tak:

Ekran @Media i (maksymalna szerokość: 900px)

Stamtąd musiałem nieznacznie dostosować kilka rzeczy, ale teraz działa świetnie. Mam nadzieję, że to pomaga komuś w przyszłości.

0
Mamdlv 27 październik 2020, 01:07