Блог

Здравствуйте, я работаю над тем, чтобы сделать мою страницу адаптивной и использую медиа-запросы. Мне труднее всего понять, почему мое второе изображение не изменится при уменьшении размера браузера.

В HTML «top-background-image» устанавливается в качестве фоновой фотографии для этого div, а «profile-pic» — это просто фотография поверх этой фоновой фотографии. В обычном полноэкранном режиме все выглядит красиво и великолепно, но независимо от того, какие изменения я вношу в «изображение профиля» в медиазапросе, оно вообще не меняется.

Другая проблема, когда я изменяю медиазапрос на «baker» и «joe», хотя у меня есть выравнивание текста по центру, текст не центрируется на экране при уменьшении размера браузера.

Пожалуйста, помогите! 🙂

Вот 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>  
  

И вот 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;
  
}
  

И вот это внутри медиа-запроса….

 @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;
      }

}
  

После того, как я повозился, я смог сам найти ответ. Оказывается, в моем случае мне нужно было добавить «экран и» после @media, чтобы это выглядело так:

@экран мультимедиа и (максимальная ширина: 900 пикселей)

Оттуда мне пришлось немного подкорректировать несколько вещей, но теперь все работает отлично. Надеюсь, это поможет кому-то в будущем.