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



Контент в мобильной версии сайта сьехал вправо

#1 alex79

alex79
  • Пользователь
  • 16 сообщений
  • Репутация: 0
0

Отправлено 31 Март 2016 - 11:15

Всем привет. У меня такая проблема  - шаблон сайта адаптивный и в мобильной версии все было нормально, а после того как внес некоторые изменения в шаблон (точно все уже не помню - вернул шаблону изначальную ширину, до этого стояла расширенная) мобильную версию перекосило - контент сьехал вправо и теперь получается черте что. Если в горизонтальном меню оставляю два первых раздела (главная, карта сайта) то вид в мобильной версии становится более менее приемлемым.  Прошу у вас помощи уважаемые форумчане, а то уже себе голову сломал да и сайт уже устал восстанавливать. Сайт - http://fishcom67.ru


 

 

  • 0

#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 730 сообщений
  • Репутация: 410

Отправлено 31 Март 2016 - 11:48

Понимать бы еще как именно это должно быть...  :wacko: Как именно должно выглядеть меню на мобильных?...

 

Например если в css добавить для #primary-menu (1150 строка в style.css) свойство ovreflow:hidden; то должно выглядеть всё красиво, но пункты меню которые не помещаются на экран не будут показываться. Такое решение устроит?

 

Если нет, то напишите что хотите получить в итоге (как должно быть)


И если еще в

<iframe id="fr" style="overflow: hidden; height: 105px; width: 300px; border: 0pt none;" src="http://www.youtube.com/subscribe_widget?p=sSlQ2tj1pVFdYoAHZ4PbCw" scrolling="no" frameborder="0"></iframe>

вместо width:300px; поставить width:100%; вид будет еще получше...


Сообщение отредактировал ShowPrint: 31 Март 2016 - 11:38

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 alex79

alex79
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 0

Отправлено 31 Март 2016 - 11:49

В нормальной мобильной версии синего меню не должно быть есть меню для мобильной версии на черном фоне вверху, а вот вам в качестве примера как должно быть  - http://kiwi100.ru (другой сайт на этом же шаблоне


  • 0

#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 730 сообщений
  • Репутация: 410

Отправлено 31 Март 2016 - 12:21

Что-то вы с файлом стилей намудрили... Какие-то видимо конфликты в медиа-запросах возникают... Вижу что при ширине меньше 740px должно убираться, а не убирается...  :(

Значит что-то дальше отменяет это правило...

 

Ради эксперимента в style.css кусок:

@media screen and (max-width: 740px) 	{
    #onecolumn, .main, #sidebar1, #sidebar2, .bottom-block { width: 100%; }
    #primary-menu { display: none; }
    #sidebar2 { float: left; }
    #page	{ margin-top: 0; }
    #desc	{ margin-bottom: 10px; } 
    #submitButton {  height: 38px; font-size: 24px; margin-left: 1px; }
    #s {  width: 80%;	margin: 7px 30px 0 15px; }
    #tabs_menu li {	font-size: 26px; }
    form#SR_form { margin: 0 auto 0; }
    input#submit { margin-right: 32px; } 
}

я взял и тупо скопировал в самый низ файла - при ширине менее 740 пикселей меню пропадает. Правда до этого все равно пункты меню перескакивают и делают "каку"...

 

Надо или как сначала писал устанавливать overflow:hidden; , или изменять значение ширины при котором меню будет прятаться

 

 

UPD: У вас потом (после этого правила) идут стили в которых меню (#primary-menu) объявляется как display:block;

 

В файле style.css перенесите все медиа-запросы ( @madia {} ) в конец этого же файла - всё должно работать как надо...

 

Только:

  • на всякий случай сделайте резервную копию
  • внимательно к фигурным скобкам, не запутайтесь при переносе

Сообщение отредактировал ShowPrint: 31 Март 2016 - 12:22

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 alex79

alex79
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 0

Отправлено 31 Март 2016 - 12:30

А если вам дать рабочий код стилей с другого сайта (http://kiwi100.ru) то это сможет помочь найти ошибку?


  • 0

#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 730 сообщений
  • Репутация: 410

Отправлено 31 Март 2016 - 12:53

помочь найти ошибку
Причину возникновения ошибки и способ ее исправления я написал в предыдущем сообщении.

 

Исправлять ее рекомендую Вам - делая это вы приобретаете бесценный опыт, который всегда пригодится если вы занимаетесь сайтостроительством  ;)

Да и мне предпочтительнее поковырять свой сайт, с которым всегда есть чем заняться =)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 alex79

alex79
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 0

Отправлено 31 Март 2016 - 13:01

С вами полностью согласен - огромное спасибо!!!


  • 0


Оформление форума – IPBSkins.ru