изменить размер логотипа на мобильных устройствах - PullRequest
Новая
       11

изменить размер логотипа на мобильных устройствах

0 голосов
/ 20 февраля 2019

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

    .logo {}
    #logoimg {
              width:250px; height:70px; transition: all .3s ease;
             }

/*============= media query max-width: 768px; =============*/

@media only screen and (max-width:768px) {

  /* start query */
  .header { padding-top: 5px; padding-bottom: 5px;}
  .logo img {width:auto;}

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

используйте класс img-responseiv Это поможет вам

0 голосов
/ 21 февраля 2019 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
}

/*============= media query max-width: 768px; =============*/

@media only screen and (max-width:768px) {
/* start query */
.header {
	padding-top: 5px;
	padding-bottom: 5px;
}
.img  {
	width:100%;
	height:auto;
}
}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <!-- logo -->
    <div class="col-md-12"> 
    <a href="index.html"><img src="https://upload.wikimedia.org/wikipedia/en/9/91/National_Film_and_Television_School_Logo.jpg" alt="logo"></a> </div>
    <!-- logo --> 
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="navigation"> <!-- navigation start-->
        <ul>
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a> </li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>
...