Блог

Главная - Вопросы по программированию - Проблема с шириной изображения при просмотре моей созданной страницы в телефоне

Проблема с шириной изображения при просмотре моей созданной страницы в телефоне

#html #css

#HTML #css — код

Вопрос:

Я столкнулся с проблемой при просмотре моей страницы с телефона. страница отлично отображается на планшете и рабочем столе с помощью Chrome dev tools, но изображение сетки неправильно отображается при просмотре страницы с телефона. каждый элемент сетки представляет собой гибкий контейнер, свойство css которого определено в разделе плитка и

Просмотр страницы на рабочем столе

Просмотр страницы на планшете / телефоне, ссылки на которую ожидаются, является проблемой при просмотре телефона введите описание изображения здесь

 .tile {
  /* TODO: MODULE_CARDS */
  /* 1. Fill in the required properties. */
  display:flex;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 10px;
  cursor:none;
  justify-content: center;
  align-items: stretch;
}


.tile img {
  /* TODO: MODULE_CARDS */
  /* 1. Fill in the required properties. */
  border: none !important;
    border-radius: 25px !important;
    max-width:120%;
    min-width:120%;
    height: 50vh !important;
}

.tile-text {
  position: absolute;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  
  color:#fff;
  bottom: 32px;

  left: 50%;
  transform: translate(-50%, -50%);
  font-size:20px;
} 
   <div class="container">
    <!-- TODO: MODULE_LAYOUT -->
    <!-- 1. Create the grid like layout as required. -->
    <div class="row">
      <div class="col-6 col-sm-6 col-lg-3 mb-4">
        <div class="tile">
          <img src="assets/bengaluru.jpg" class="tile img" alt="bengaluru" >
          <div class = "tile-text" style="text-align:center ">
            <h5>bengaluru</h5>
            <p>100  places</p>
          </div>
          </div>
        
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <img src="assets/kolkata.jpg" class="tile img" alt="kolkata">
            <div class = "tile-text" style="text-align:center ">
              <h5>kolkata</h5>
              <p>52  places</p>
            </div>
          </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4">
        <div  class="tile">
          <img src="assets/goa.jpg" class="tile img" alt = "goa">
          <div class = "tile-text" style="text-align:center ">
            <h5>goa</h5>
            <p>162  places</p>
          </div>
          </div>
    </div>
    <div class="col-6 col-sm-6 col-lg-3 mb-4">
        <div  class="tile">
          <img src="assets/mumbai.jpg" class="tile img" alt = "mumbai">
          <div class = "tile-text" style="text-align:center ">
            <h5>mumbai</h5>
            <p>121  places</p>
          </div>
          </div>
    </div>
    </div>
    <div class="row">
      <div class="col-6 col-sm-6 col-lg-3 mb-4">
          <div  class="tile">
            <img src="assets/singapore.jpg" class="tile img" alt = "singapore">
            <div class = "tile-text" style="text-align:center ">
              <h5>singapore</h5>
              <p>89  places</p>
            </div>
          </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4">
          <div  class="tile">
            <img src="assets/dubai.jpg" class="tile img"alt = "dubai">
            <div class = "tile-text" style="text-align:center ">
              <h5>dubai</h5>
              <p>74  places</p>
            </div>
          </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4">
        <div  class="tile">
          <img src="assets/malaysia.jpg" class="tile img"alt = "malaysia">
          <div class = "tile-text" style="text-align:center ">
            <h5>malaysia</h5>
            <p>172  places</p>
          </div>
        </div>
    </div>
    <div class ="col-6 col-sm-6 col-lg-3 mb-4">
        <div  class="tile">
          <img src="assets/paris.jpg" class="tile img" alt =  "paris">
          <div class = "tile-text" style="text-align:center ">
            <h5>paris</h5>
            <p>150  places</p>
          </div>

        </div>
    </div>
    </div>
  </div>