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

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем bond, 20 дек 2015.

  1. bond

    bond Пользователь

    Сообщения:
    32
    Симпатии:
    1
    Добрый вечер! Подскажите пожалуйста, хотел уменьшить логотип, для этого в файле stylesheet.css в разделе /* logo */ добавил строку:
    width: 50%;
    размер меня устроил,но после этого в мобильной версии логотип стал с левой стороны,добавил эти строки:
    margin-left: auto;
    margin-right: auto;
    логотип в мобильной версии стал по середине как и нужно, но в обычной версии логотип немного сместился в право т.е. теперь он примерно на сантиметр правее начала главного меню.Подскажите что еще можно добавить?:) Спасибо!
     
  2. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    215
    Создайте медиа запрос для нужного размера экрана
    Код:
    @media (max-width: макс.размер ) { свои стили }
    и добавьте в него свои стили
     
    Последнее редактирование: 21 дек 2015
  3. bond

    bond Пользователь

    Сообщения:
    32
    Симпатии:
    1
    Спасибо огромнейшее, все получилось! :)
     
  4. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    Всем привет.
    Немного изменил шапку сайта, логотип подвинул чуть выше и правее. На ПК все выглядит хорошо,а вот в мобильной версии сайта логотип теперь находится за меню Категории и его видно меньше,чем наполовину. Телефонов вообще нет, только значки трубки.
    Подскажите, как это исправить?
    P.S. Версия ocStoe 2.1.0.2.1. Шаблон стандартный.
     
  5. Vlad

    Vlad Эксперт

    Сообщения:
    3.904
    Симпатии:
    938
    исправить стили. Только так можно ответить не видя того что вы сделали.
     
  6. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    Напишите, что нужно сюда выложить, что бы Вы могли посмотреть?
     
  7. Vlad

    Vlad Эксперт

    Сообщения:
    3.904
    Симпатии:
    938
    адрес сайта
     
  8. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    Последнее редактирование: 1 мар 2017
  9. Vlad

    Vlad Эксперт

    Сообщения:
    3.904
    Симпатии:
    938
    1. Почитать про Bootstrap
    2. в header.tpl для логотипа добавить класс, например так
    <div class="col-sm-4 col-xs-4">
    <div id="logo">


    с остальным так же.. или на подобие..
     
    opencarter нравится это.
  10. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    1. Учтем.
    2. Добавил, но ничего не изменилось.

    Насчет остального не совсем понял, где-то еще нужно добавить col-xs-4?
     
  11. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    215
    Вы ошибку допустили
    HTML:
    <div col-xs-4="" class="col-sm-4">
    А надо
    HTML:
    <div class="col-sm-4 col-xs-4">
     
    opencarter нравится это.
  12. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    Влад написал:
    <div class="col-sm-4 col-xs-4">
    Вы пишете:
    <div class="col-sm-4 col-xs-4">

    Не понял, где ошибка?
     
  13. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    215
    Вы рядом прописали, а надо добавить в class="сюда"
     
    opencarter нравится это.
  14. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    У меня сейчас вот так прописано:
    <div class="col-sm-4 col-xs-4">
    <div id="logo">

    Если это не верно, то напишите, пожалуйста, правильный вариант.
     
  15. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    215
    Верно. Но когда открываю исходный код вашего сайта, код такой:
    HTML:
    <header>
         <div class="container">
                <div class="row">
                        <div class="col-sm-4" col-xs-4>
                                  <div id="logo">
    <div class="col-sm-4" col-xs-4> - не внутри class

    Проверял в разных браузерах
     
    opencarter нравится это.
  16. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    Да, действительно была ошибка. Спасибо за подсказку.
    Сейчас исправил, но в мобильной версии логотип так и остался на заднем плане. И телефонов не видно.
     
  17. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    215
    Чтоб телефоны были всегда видны, уберите в 3х местах
    Код:
    hidden-xs hidden-sm hidden-md
    из
    HTML:
    <span class="hidden-xs hidden-sm hidden-md">
    В css создайте медия-запрос и для логотипа уберите применение этих стилей:
    Код:
    #logo {
        left: 16px;
        position: absolute;
        top: -25px;
    }
    Я место col-xs-4 поставил бы col-xs-12 - чтоб логотип был на всю ширину моб.экрана
    и для дива где поиск
    Код:
    <div class="col-sm-7 ">
    (после закрывающего
    <div class="col-sm-4 col-xs-4"> ) сделал так
    Код:
    <div class="col-sm-7 col-xs-12">
     
    opencarter нравится это.
  18. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    RoS, большое спасибо за помощь!
    Теперь в мобильной версии видно все телефоны и логотип появился.
    Только теперь логотип вплотную к главному меню, его бы поднять немного. Как это сделать?

    И вот этот момент не совсем понял. Это нужно сделать там, где написано row? Вроде бы сделал, но не уверен, что правильно. Если не сложно проверьте, пожалуйста.

     
  19. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    А вот это для меня пока темный лес. В теории прочитал, что это такое, но как это использовать на практике пока не понимаю.
     
  20. RoS

    RoS Специалист

    Сообщения:
    221
    Симпатии:
    215
    По html все в порядке, но проблемки в стилях, вижу вы экспериментируете. Отступы для логотипа можно сделать
    Код:
    #logo {
        margin-bottom:10px ;
    }
     
    opencarter нравится это.