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

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

 

Создайте медиа запрос для нужного размера экрана

Код:

@media (max-width: макс.размер ) { свои стили }

и добавьте в него свои стили

 

Спасибо огромнейшее, все получилось!

 

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

 

исправить стили. Только так можно ответить не видя того что вы сделали.

 

Напишите, что нужно сюда выложить, что бы Вы могли посмотреть?

 

адрес сайта

 

сайт

 

1. Почитать про Bootstrap
2. в header.tpl для логотипа добавить класс, например так

<div class="col-sm-4 col-xs-4">

<div id="logo">

с остальным так же.. или на подобие..

 

1. Учтем.
2. Добавил, но ничего не изменилось.

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

 

Вы ошибку допустили

HTML:

<div col-xs-4="" class="col-sm-4">

А надо

HTML:

<div class="col-sm-4 col-xs-4">

 

Влад написал:
<div class="col-sm-4 col-xs-4">
Вы пишете:
<div class="col-sm-4 col-xs-4">

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

 

Вы рядом прописали, а надо добавить в class="сюда"

 

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

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

 

Верно. Но когда открываю исходный код вашего сайта, код такой:

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

Проверял в разных браузерах

 

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

 

Чтоб телефоны были всегда видны, уберите в 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">

 

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

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

 

А вот это для меня пока темный лес. В теории прочитал, что это такое, но как это использовать на практике пока не понимаю.

 

По html все в порядке, но проблемки в стилях, вижу вы экспериментируете. Отступы для логотипа можно сделать

Код:

#logo {
    margin-bottom:10px ;
}