Блог

Главная - Вопросы по программированию - Как расположить изображения вертикально рядом с картой на рабочем столе, но расположить их горизонтально на мобильном устройстве?

Как расположить изображения вертикально рядом с картой на рабочем столе, но расположить их горизонтально на мобильном устройстве?

#html #css #media-queries

Вопрос:

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

Мне кажется, что они расположены горизонтально и рядом друг с другом как на рабочем столе, так и на мобильном устройстве, и мне было интересно, может ли кто-нибудь помочь мне решить эту проблему. Вот что у меня есть до сих пор:

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Welcome ♡ </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">

  </head>
  <body>
    <header>
      <h1>HEllO!</h1>
          <nav>
              <u1 class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="https://open.spotify.com/playlist/4crypoa8XP0ECmjGnlGvWx?si=6d29a3f0d7664ab5">Spotify</a></li>
                <li><a href="https://mailtolink.me/">Contact</a></li>
              </u1>
          </nav>
    </header>

    <br/>
    
    <section>
      <div class="img-div">
        <img src="https://i.pinimg.com/564x/26/8c/97/268c97812d22fa3d3a4e1b7868bd4826.jpg">
      </div>
      <div class="img-div">
        <img src="https://i.pinimg.com/564x/66/22/ee/6622eed8cd7cfdeb1c51898436c51277.jpg">
      </div>
      <div class="img-div"> 
        <img src="https://i.pinimg.com/564x/27/28/65/272865bb0682edbf25f8e8bb87e5bcf3.jpg">
      </div>
    </section>
    
    <main>
      <div>
        <div class="card">
          <h2>Welcome</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
            deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
            deserunt mollit anim id est laborum.
          </p>
          <br/>
          <a class="button" href="https://pomofocus.io/app">
            Button
          </a>
        </div>
      </div>
    </main>

    <footer>
        Page by --. All rights reserved.
    </footer>

    
  </body>
</html>
 
 body {
    background-color: #f3e3ed;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    width: 90%;
    color: #704523;
}

h1 {
    font-size: 300%;
}

h1, h2 {
    text-align: center;
    text-transform: uppercase;
}

section {
    display: flex;
    text-align: center;
}

.img-div {
    width: 60%;
  }
  
img {
    width: 60%;
  }  

nav{
    text-align: center;
}
.nav-links{
    padding: 28px 0;
}
.nav-links li{
    display: inline-block;
    margin: 0 15px;
}
.nav-links li a{
    text-decoration: none;
    color:#704523;
    padding: 5px 0;
    position: relative;
}
.nav-links li a::after{
    content: '';
    background: rgb(102, 49, 49);
    width: 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.5s;
}
.nav-links li a:hover::after{
    width: 100%;
}

.card {
    padding: 20px;
    background: #ffffff;
    border-radius: 15px;
    color: #704523;
    text-align: center;
  }
  

.button {
    padding: 15px;
    background: #dadada;
    border-radius: 15px;
    color: #704523;
    text-decoration: none;
    transition: 0.5s;
  }
  
.button:hover {
    background: #f3e3ee;
    color: black;
  }

footer {
    padding: 15px;
    background: #d8d8d8;
    border-radius: 15px;
    position: absolute;
    bottom: 5%;
    width: 90%;
    text-align: center;
}

Вот чего я пытаюсь достичь на фотографиях:

Вид рабочего стола

Мобильная версия

Ответ №1:

Да, вам придется использовать @media и определить, при каком размере экрана будет применяться стиль.

Взгляните на пример здесь;

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Вы определяете базовый стиль CSS и другой, когда размер экрана достигает максимального или минимального предела.

Метки: ,