2

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

Я пытался вот так прописывать :


<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>

Мне нужно, чтобы меню (там, где Главная, каталог, контакты и т.д) , чтобы оно через телефон или планшет тоже отображалось во весь экран, чтобы логотип смотрелся так, как на основе... Не знаю, как еще описать проблему, надеюсь поняли...

Прикрепил скрин с телефона и скрин с компьютера.

введите сюда описание изображения введите сюда описание изображения

3
  • 1
    Без CSS и картинок ничего ответить нельзя
    – andreymal
    Commented 4 сент. 2016 в 11:21
  • 1
    Почитайте про media запросы. А в консоли разработчика можно имитировать мобильное устройство.
    – Amandi
    Commented 4 сент. 2016 в 11:21
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 5 сент. 2016 в 5:06

1 ответ 1

2

Рекомендую ознакомиться с документацией бутстрапа по сетке и компоненту .navbar. Они помогут сделать верстку конкретно вашего участка адаптивной.

Ваш код в итоге станет близок вот к такому:

<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>
1
  • спасибо Вам заранее, за вашу помощь.
    – DaniiL337
    Commented 4 сент. 2016 в 13:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.