Перейти к содержимому

MOAB

- - - - -

Помогите с адаптивным дизайном


  • Войдите, чтобы ответить
Сообщений в теме: 14

#1 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

Отправлено 20 Июнь 2015 - 19:36

У меня 2 сайта на одинаковом шаблоне. Со временем, конечно, различия в коде появились, но не принципиальные, по мелочам - место рекламы, картинок и т.п. подобное. На первом сайте сделала адаптивную верстку - вроде все норм.

На втором стала делать по аналогии, но застопорилась: вот уже вторую неделю не получается выравнять ширину текста основной части - он больше шапки, которая хорошо выравнивается, практически в 2 раза, и я не могу понять, что именно дает эту ширину.
Думала, что это картинки - нашла страницу без картинок, то же самое.
Рекламные блоки - тоже не они, т.к. их размер "гуляет", а ширина текста постоянная.

Смотрю в режиме "исследовать элемент" в фоксе - ну не могу понять, откуда берется эта ширина :(. Ощущение, что я не вижу чего-то очевидного...

Подскажите, плиз, может есть какой-то инструмент, с помощью которого можно увидеть больше, чем видно в фоксе?

#2 virtuoso

virtuoso

    Продвинутый

  • Участник
  • PipPipPip
  • 227 сообщений
154
  • ИзЛитвы

Отправлено 20 Июнь 2015 - 19:53

Если сайт есть в Сети, дайте мне (можно URL в личку), я гляну. Или пришлите шаблон во вложении. Так, со слов - практически невозможно что-то сделать.
И что касается вопроса - у всех основных браузеров сегодня есть встроенная функция "исследовать страницу", но по моему опыту Firebug к Firefox'у - лучший инструмент для этих целей.

#3 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 20 Июнь 2015 - 20:10

virtuoso, спасибо, посмотрю Firebug.
Сайт в подписи. Если сжать страницу до 640, то все и видно:(

#4 Матумба

Матумба

    во имя матана

  • Участник
  • PipPipPipPipPip
  • 5 093 сообщений
6 408
  • ИзКрии

Отправлено 20 Июнь 2015 - 20:23

в любой непонятной ситуации
* {padding:5px!important; outline:1px solid magenta;}

Просмотр сообщенияTata_N сказал:

посмотрю Firebug.
он или его аналоги сейчас есть в любом браузере
"Бескорыстие и любовь к ближнему в себе надо давить"
Почти правильный сеосервис

#5 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 20 Июнь 2015 - 20:50

Просмотр сообщенияДартаньян сказал:

он или его аналоги сейчас есть в любом браузере
так до сих пор и обходилась встроенным исследованием элемента - он вроде все показывает - и границы, и размеры, и отступы, и маргины и паддинги....

Просмотр сообщенияДартаньян сказал:

в любой непонятной ситуации
не поняла, что мне это должно показать? границы я вижу - мне пунктиром фокс их все показывает, каждого элемента, и в блочном виде показывает, и заданные значения, и вычисленные.
А вот откуда при ширине экрана 640 и заданной ширине таблицы 100% он получает ее ширину 740рх - не понимаю

#6 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 407 сообщений
2 019
  • ИзРоссии :(

Отправлено 20 Июнь 2015 - 20:57

Tata_N, рекламные блоки блокируют в обоих случаях. Из-за них таблицы не сжимаются.
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#7 Матумба

Матумба

    во имя матана

  • Участник
  • PipPipPipPipPip
  • 5 093 сообщений
6 408
  • ИзКрии

Отправлено 20 Июнь 2015 - 21:03

Просмотр сообщенияTata_N сказал:

А вот откуда при ширине экрана 640 и заданной ширине таблицы 100% он получает ее ширину 740рх - не понимаю
Женщины...
нижние ссылки от гугла если убрать - становится почти ок (но где-то лишний пиксель создаёт горизонтальную прокрутку)

не знаю как в фаерфоксе, но в хроме можно прямо бахнуть нужную ноду в дом-дереве
"Бескорыстие и любовь к ближнему в себе надо давить"
Почти правильный сеосервис

#8 virtuoso

virtuoso

    Продвинутый

  • Участник
  • PipPipPip
  • 227 сообщений
154
  • ИзЛитвы

Отправлено 20 Июнь 2015 - 21:04

Да, скорее всего Valek, прав, у вас блок ads наверное 740 писелей? У меня тоже такое встречалось.

#9 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 407 сообщений
2 019
  • ИзРоссии :(

Отправлено 20 Июнь 2015 - 21:09

Просмотр сообщенияДартаньян сказал:

но где-то лишний пиксель создаёт горизонтальную прокрутку
Да есть еще 3й случай. наверно где-то бордер вылазиет и дает горизонтальную прокрутку

Просмотр сообщенияДартаньян сказал:

в любой непонятной ситуации
падинги и бордеры бахнуть можно через
box-sizing: border-box;
Они будут внутри блока, только маргин внешне останется
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#10 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 20 Июнь 2015 - 21:24

а-а-а-а, черт-черт-черт))), точно - это ссылки гугла!

Просмотр сообщенияДартаньян сказал:

Женщины...
ну, что есть, то есть)))

Просмотр сообщенияДартаньян сказал:

нижние ссылки от гугла если убрать - становится почти ок (но где-то лишний пиксель создаёт горизонтальную прокрутку)
ну это уже мелочи))) - теперь есть с чем "поковыряться"))

Спасибо-спасибо-спасибо всем большое!!!

#11 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 407 сообщений
2 019
  • ИзРоссии :(

Отправлено 20 Июнь 2015 - 21:29

Просмотр сообщенияValek сказал:

еще 3й случай.
появления горизонтальной прокрутки в столбе с классом "wom2s" когда при сжимании срабатывают медиа запросы. Ну там либо сильнее ужать или убрать бордер
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#12 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 21 Июнь 2015 - 16:22

Возник еще вопрос:
есть окно для комментариев, его размер прописан в comments.php - там была ширина 70%. При сужении экрана оно стало мешать, и я поставила 30%. Но для маленького (240) экрана и это много, а для большого - это окно выглядит мелко - фигня, в общем..

Вопрос вот в чем: могу ли я в .рнр узнать/проверить размер экрана, чтобы сделать размер окна комментариев гибким?
Или есть другие способы сделать это?

#13 virtuoso

virtuoso

    Продвинутый

  • Участник
  • PipPipPip
  • 227 сообщений
154
  • ИзЛитвы

Отправлено 21 Июнь 2015 - 19:03

Посмотрите в Яндексе - "CSS media queries", там подробно рассказывается как для разных размеров экрана устанавливать свои правила. Но если у вас все о 'кей, и проблема только с окном комментариев - можно попытаться найти выход более простыми средствами. Сразу в голову ничего не приходит, но может поиграть с max-width / min-width.

#14 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 407 сообщений
2 019
  • ИзРоссии :(

Отправлено 21 Июнь 2015 - 19:26

Просмотр сообщенияTata_N сказал:

Или есть другие способы сделать это?
в php убрать у элемента параметр отвечающий за ширину элемента . В CSS прописать селектор элемента с шириной наример 80% с приоритетом "!important". По идее элемент должен в ширь вставать на 80% от родительского контейнера. Или медиа запросами задавать статичную ширину

UPD
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#15 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 21 Июнь 2015 - 19:53

Просмотр сообщенияValek сказал:

в php убрать у элемента параметр отвечающий за ширину элемента . В CSS прописать селектор элемента с шириной
ага! спасибо))
===
UPD. Ура, получилось!)))

Сообщение отредактировал Tata_N: 21 Июнь 2015 - 21:33




Похожие темы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных



© 2019 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва

Мы в соцсетях: twitter | вконтакте | facebook | livejournal