Адаптировавшие сайта

[svkarasev]

Здравствуйте всем
Подскажите пожалуйста, как быть! Работаю над сайтом Для просмотра ссылки Войди или Зарегистрируйся и по своей не опытности где-то что-то не досмотрел в верстке сайта, при открытии сайта с широкоформатным дисплеем отображение, но если использовать нетбук или планшет или уменьшить окно браузера , то логотип опускается чуть ниже и налазает на первый блок. Пробовал использовать <meta name="viewport" content="width=device-width, initial-scale=1.0">, но тогда на мобильных устройствах и планшетах видно только один рекламный блок и логотип налезший на него.... Подскажите пожалуйста, что я не досмотрел и как это исправить,
Заранее благодарю

P/S CSS файл тут ... Для просмотра ссылки Войди или Зарегистрируйся...

 

[Helenium]

bootstrap в таких случаях выручает)

можно написать отдельно свои стили для смартфонов и планшетов, это верный способ сохранить дизайн на своем месте:
@media only screen and (min-device-width:320px)
and (max-device-width:480px) {ваши стили для телефона }
@media only screen and (min-device-width : 481px)and (max-device-width: 768px){ стили для планшета}

 

[invader]

ТС ничего дописывать не надо. У него есть: Для просмотра ссылки Войди или Зарегистрируйся
Расставить классы: Для просмотра ссылки Войди или Зарегистрируйся

 

[zALEHANz]

@media (min-width: 992px) {
.logo img {width:65%}
}
В бутстрап приходится зачастую многое прописывать для каждого разрешения

 

[spyrius]

Еще можно выводить разные версии логотипа для небольших разрешений экрана и по-разному их позиционировать:

@media only screen and (max-width: 959px) {
   .site-title img {
      display: none;
   }
   .site-title a {
      display: inline-block;
      background: url("http://yoursite.com/uploads/logo2.png") no-repeat center center;
      background-size: contain;
      width: 220px;
      height: 40px;
   }
}

@media only screen and (max-width: 519px) {
   .site-title a {
      background-image: url("http://yoursite.com/uploads/logo3.png");
      width: 100px;
      height: 44px;
   }
}

 

[Smooch]

Может и не актуально уже.
Сам сайт уже закончен? Рекомендую сначала разобраться с ошибками... посмотрите в консоли, их там хватает.
Очень много всего не нужного в стилях, я бы просто посоветовал отдать в работу опытному верстальщику, себе время и нервы сэкономите.

Но если все таки сами хотите пройти этот путь, то изначально верстайте по принципу "mobile-first"... то есть, прежде чем писать стили, представить как это должно отображаться на устройствах. Мне лично без макетов не понятно что требуется сделать с логотипом, если просто уменьшить для мобильных устройств, то используйте ширину в процентах и max-width, min-width, если растянуть по ширине, то как писали выше у вас есть классы бутстрапа. Хотя тянуть весь бутсрап еще и с шрифтовыми иконками тут совсем ни к чему, от него можно было взять только сетку и то для сетки есть более легкие решения.

 

[deneos]

тоже порекомендую бутсрап 3, сам недавно стал его применять практически на всех сайтах, но его тож надо допиливать ручками

 

[tovGANs]

@media (min-width: 992px) {
.logo img {width:65%}
}
В бутстрап приходится зачастую многое прописывать для каждого разрешения

Если разобраться в бутстреп хорошо, то дописывать много там не надо. Там много уже прописано и просто нужно уметь этим пользоваться. Я поначалу тоже простыню целую писал, пока не вник что да как.
К тому же, так как это framework, то можно подключать только то, что действительно необходимо. Не забывайте, что браузер может в один момент захлебнуться от количества правил.

 

[zALEHANz]

Если разобраться в бутстреп хорошо, то дописывать много там не надо. Там много уже прописано и просто нужно уметь этим пользоваться. Я поначалу тоже простыню целую писал, пока не вник что да как.
К тому же, так как это framework, то можно подключать только то, что действительно необходимо. Не забывайте, что браузер может в один момент захлебнуться от количества правил.

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

 

[Smooch]

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