Сообщений в теме: 6

[nikolia]

Здравствуйте! В общем такая проблема, неправильно отображается объявление во вкладке Teaser все съезжает на планшете с экраном 10 дюймов,на демо сайте все нормально

Остается пустое место с права у объявления:

Вот у меня

Вот на демо сайте:

мой сайт http://chita-rio.ru/board.html

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

вот как на демо сайте

[Cheren-dow]

В рамочку label обводят стили bootstrap - a , который идет в стандартном шаблоне Joomla.

 

Допишите следующий стиль в ваш CSS 

.label{
display: inline-block;
padding: 2px 4px;
font-size: 10.998px;
font-weight: bold;
line-height: 14px;
color: #fff;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Для нормального отображения на планшете и т.д , дописывайте CSS стили используя медиа запросы

@media only screen and (min-width: 768px) and (max-width: 959px) {
   
}

@media only screen and (min-width: 481px) and (max-width: 767px) {

}

@media only screen and (max-width: 480px) {
	
}

Тут подробно написано что да как с медиа запросами

Сообщение отредактировал Cheren-dow: 18 September 2013 - 14:09

[nikolia]

Еще бы знать куда это прописать

1. @media only screen and (min-width: 768px) and (max-width: 959px) {
2.  
3. }
4.  
5. @media only screen and (min-width: 481px) and (max-width: 767px) {
6.  
7. }
8.  
9. @media only screen and (max-width: 480px) {
10.     
11. }

стили в шаблон добавил,рамочка появилась

Сообщение отредактировал Nikolia: 18 September 2013 - 14:12

[Cheren-dow]

Пишите в http://chita-rio.ru/...-responsive.css тут уже есть медиа запросы

 

grid-12-responsive.css

 

JBZoo не имеет адаптивной верстки - поэтому это только своими руками 

Сообщение отредактировал Cheren-dow: 18 September 2013 - 14:14

[nikolia]

Остается пустое место с права у объявления:

Вот у меня

а как вот этим быть?

[Cheren-dow]

Можно даже не писать собственные стили а воспользоваться grid-12(он адаптивный) , которая присутствует на сайте и прописать нужные стили в teaser - e.

Остается пустое место с права у объявления:

Вот у меня

а как вот этим быть?

В файле 

http://chita-rio.ru/media/zoo/applications/jbuniversal/assets/css/jbzoo.flat.css

найдите .jbzoo-app-flat .more-info ~ 114 строка и укажите ширину блока, например

.jbzoo-app-flat .more-info {
width: 536px;
float: left;
position: relative;
}

[nikolia]

Спасибо огромное! Все получилось! СПАСИБО