Hello. Help me please. I ran into the problem that my site through the computer is displayed well, but through the phone it’s just a misery. Please help me on the example of the menu to make the menu on the phone look the same as on the computer.

I tried to prescribe like this:

<div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> <div id="logo"><a href="index.html"><img src="style/images/logo.png" alt="" /></a> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> <div id="contacts"><span style="font-size:16px;" class="glyphicon glyphicon-envelope"></span> E-mail: <p><span style="font-size:16px"; class="glyphicon glyphicon-phone"></span>Телефон: </p> </div> </div> </div> <div class="row"> <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12"> <ul class="menu1"> <li><a href="#">Главная</a></li> <li><a href="#">Демо-доступ</a></li> <li><a href="catalog.html">Каталог</a></li> <li><a href="contact.html">Контакты</a></li> </ul> </div> </div>

I need the menu (where Home, catalog, contacts, etc.), so that it is displayed on the phone or tablet on the full screen too, so that the logo looks like it is based on ... I don’t know how else to describe the problem I hope you understand ...

Attached a screen from the phone and a screen from the computer.

enter image description here enter image description here

  • one
    Without CSS and images nothing can be answered - andreymal
  • one
    Read about media queries. And in the developer console, you can simulate a mobile device. - Amandi
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

I recommend reading the bootstrap documentation on the grid and the .navbar component. They will help make the layout of your particular site adaptive.

Your code will eventually become close to this:

 <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="logo"> <a href="index.html"> <img src="style/images/logo.png" alt="" /> </a> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="contacts"> <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: <p> <span style="font-size: 16px"; class="glyphicon glyphicon-phone"></span>Телефон: </p> </div> </div> </div> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="#">Главная</a> </li> <li> <a href="#">Демо-доступ</a> </li> <li> <a href="catalog.html">Каталог</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div>
  • Thank you in advance for your help. - DaniiL337