Выравнивание адаптивных иконок и текста - PullRequest
Новая
       72

Выравнивание адаптивных иконок и текста

0 голосов
/ 21 марта 2020

Я бы не хотел, чтобы текст уменьшался под значком при уменьшении размера экрана.

На снимке экрана показано, как он выглядит. Я не знаю атрибутов CSS, чтобы контролировать это. enter image description here

$(document).ready(function(){
  $('.menu-toggle').click(function(){
    $('nav').toggleClass('active')
  }) 
})
.pagewrap1 {
width: 90%;
background-color:orange;
margin:0 auto;
padding: 0 20px 0 20px;
}

div.data {
background-color:green;
}

/*.scroll {
overflow-x: scroll;
}*/
table.data {
border-width: 0px;
width:750px;
background-color:yellow;
}
.auto-style2 {
border-style: solid;
border-width: 1px;
}

.auto-style2b {
border-style: solid;
border-width: 1px;
background-color:purple;
}


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

.pagewrap {
background-color:blue;
}

.scroll {
overflow-x: scroll;
margin-left: 30px;
}

.auto-style2b {
position: absolute;
left: 30px;
width:25px;
}


table.data {
width:100%;	
}

}
<header>
  <div class = "logo"><a href = "home.php"><img src="images/logo_transparent_background.png" height="75px"></a></div>
  <nav>
    <ul>
      <li><a href = "home.php"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
      <li><a href = "month.php" class = "active"><i class="fa fa-calendar-plus-o" aria-hidden="true"></i>Month</a></li>
      <li><a href = "#"><i class="fa fa-credit-card" aria-hidden="true"></i>Accounts</a></li>
      <li><a href = "#"><i class="fa fa-usd" aria-hidden="true"></i>Cash</a></li>
      <li><a href = "#"><i class="fa fa-calculator" aria-hidden="true"></i>Budget</a></li>
      <li><a href = "#"><i class="fa fa-calendar" aria-hidden="true"></i>Year</a></li>
      <li><a href = "#"><i class="fa fa-line-chart" aria-hidden="true"></i>Reports</a></li>
      <li><a href = "#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>Profile</a></li>
      <li><a href = "#"><i class="fa fa-envelope-o" aria-hidden="true"></i>Contact</a></li>
    </ul>
  </nav>
  <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</header>
...