[Помогите] 1) Всплывающее окно под корзиной уехало вниз. 2) Проблема с шириной сайта на планшете, телефоне.

Доброй ночи!

Чтобы не плодить тем, задам сразу 2 вопроса, 1-ый решить не могу уже неделю, а 2-ой даже не знаю как решить.

1) Есть корзина, рядом с ней маленькая кнопка, при нажатии на нее показывается содержимое, сумма, кнопки для оформления заказа и просмотра корзины. Так вот, всплывающее окно сначала было вплотную к корзину (это нормально), но потом уехало вниз, решили проблему, сейчас опять съехало вниз.
Проблема в том, что при попытке наведения мышкой на окно, оно пропадает, и надо сделать его впритык.
Из stylesheet:

Код:

#cart {
position: relative;
min-width: 300px;
right: 40px;
bottom: 45px;
z-index: 999; 

}
#cart .heading {
float: right;
padding: 9px 12px 15px 35px;
    border: 3px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
position: relative;
z-index: 1;
color: #999;
height: 35px;
width: 160px;
background: url(../image/cart-head.png) no-repeat left center;
bottom: 27px;
}
#cart .heading h4 {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 3px;
}
#cart .heading a {
    color: white;
    text-decoration: none;
}
#cart .heading a span {
    background: url('../image/arrow-down.png') 100% 0% no-repeat;
    padding-right: 15px;
}
#cart .content {
clear: both;
display: none;
width: 400px;
float: right;
padding: 0px 8px 8px 8px;
background: #3B3D42;
z-index: 999;
border-bottom: 3px solid #BF2A2A;
border-top: 3px solid #BF2A2A;
}


#cart.active .heading {

}
#cart.active .content {
    display: block;

}

Даже уже и не знаю, что пробовать.
Сам сайт:

2) В браузере сайт отображается корректно. На телефоне, планшете раньше тоже отображался корректно. Заметил, что после изменений в шапке, футере, вставки Callme страницы на телефон отображаются некорректно.
Что именно: справа от страницы добавляется большой ненужный кусок фона.

Код:

#container {
width: 1022px;
margin: 0 auto;
text-align: left;

Ширину пробовал указывать 100% - не вариант, шаблон сразу "плавать" начинает, #column-right { с #column-left { сделал одинаковыми в stylesheet - изменений 0, пробовал еще некоторые вещи - бесполезно.
п.с. тестировал на iPhone (7 iOS), планшет на Андроиде 4..., ну и на каком-то телефоне на 2 Андроиде. Кстати, на 2-ой версии Андроид отображается корректно (но там экран маленький, мб в этом дело).


Кто-нибудь сталкивался с этим?

 

1 проблема решилась, огромнейшее спасибо!
<meta name="viewport" content="width=1000"> в header.tpl добавить? После чего?

 

Не получилось. Вообще, мне кажется, что я чего-то лишнего впихнул в header/footer.

 

у меня safari, скачал chrome - проблема не изменилась. А где именно не закрыл теги? Или придется всю папку common проверять? :(

 

удалил div-ы (в footer, только там есть </body>) , не помогло, </br> - новый абзац, он разве может такую проблему сделать?

 

Добавил </div>, изменил </br> на <br>, не изменилось ничего.

 

Все дело в css дай адрес сайта скажу что на что поменять

 

Кстати, вместе с кривым отображением на телефоне/планшете сайт, у меня на экране компьютера сайт теперь тоже не во весь экран, справа совсем чуть-чуть ненужного фона. Мне кажется, что дело в ширине какого-то модуля?

 

То есть, нужно исправить отображение на мобильных устройствах и в других браузерах.
Мои предположения: правка контейнера или модулей.

 

без изменений. Эм, а у меня корзина не уходит.
Нашел такую тему:

А если я в stylesheet.css добавлю ?

Код:

* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
} 

Как написано в той теме.

Нашел, где искать проблемы - stylesheet.css. Я по очереди footer, home, header, stylesheet менял начальные (без изменений) на свои, как stylesheet.css поменял - так и на телефоне и в браузере сайт стал отображаться идеально.

Вот мой stylesheet (который изменен и портит нормальное отображение) - http://rghost.ru/50243292