Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 1537 Просмотров
*

noopp

  • Новичок
  • 7
  • 0 / 0
Ув. пиплы! Столкнулся с такой порблемой, что сайт на простом шаблоне beez_20 на некоторых устройствах и плантшетах отображается не так как хотелос бы:

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

Sticher78

  • Захожу иногда
  • 189
  • 23 / 4
  • ТЫЖКОМПЬЮТЕРЩИК
Берешь куркулятор в руки, считаешь проценты от ширины текущего экрана, 70-80 примерно и потом для каждого расширения распространенного указываешь ширину через свойство @media в css-файле.ну а для мелких экранов указываешь 95-100% . Для экрана 1650px по ширине 70 процов было достаточно, для более мелких сам прикинь.
Нужно делать так, как нужно! А так как не нужно - делать не нужно!!!! (с) Винни-Пух

Skype, Telegram - Sticher78
*

noopp

  • Новичок
  • 7
  • 0 / 0
Спасибо за ответ и за попытку помочь.
К сожалению, моих знаний не хватит чтобы понять, найти и исправить всё)))
Писал в надежде на то, что всё еще проще. Но нет
*

Serg_

  • Захожу иногда
  • 168
  • 24 / 1
  • Skype: smile_bot (Запорожье)
В качестве примера посмотрите:
Код
[spoiler]@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .rt-container {width: 960px;}
    .rt-grid-1 {width: 80px;}
.rt-grid-2 {width: 160px;}
.rt-grid-3 {width: 240px;}
.rt-grid-4 {width: 320px;}
.rt-grid-5 {width: 400px;}
.rt-grid-6 {width: 480px;}
.rt-grid-7 {width: 560px;}
.rt-grid-8 {width: 640px;}
.rt-grid-9 {width: 720px;}
.rt-grid-10 {width: 800px;}
.rt-grid-11 {width: 880px;}
.rt-grid-12 {width: 960px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .rt-container {width: 768px;}
    .rt-grid-1 {width: 64px;}
.rt-grid-2 {width: 128px;}
.rt-grid-3 {width: 192px;}
.rt-grid-4 {width: 256px;}
.rt-grid-5 {width: 320px;}
.rt-grid-6 {width: 384px;}
.rt-grid-7 {width: 448px;}
.rt-grid-8 {width: 512px;}
.rt-grid-9 {width: 576px;}
.rt-grid-10 {width: 640px;}
.rt-grid-11 {width: 704px;}
.rt-grid-12 {width: 768px;}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
body {-webkit-tap-highlight-color: transparent;}
    .rt-container {width: 480px;}
    .rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
}

@media only screen and (max-width: 480px) {
body {-webkit-tap-highlight-color: transparent;}
    .rt-container {width: 95%;}
    .rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
} [/spoiler]

@media only screen and (min-width: 960px) and (max-width: 1199px)
указываете ширину экрана
далее в {} указываете классы блоков шаблона и размеры самих блоков.
*

Sticher78

  • Захожу иногда
  • 189
  • 23 / 4
  • ТЫЖКОМПЬЮТЕРЩИК
Да-да, Серг, ты прав, просто мне лень расписывать было) Почитайте про Twitter Bootsrap  в Google
Нужно делать так, как нужно! А так как не нужно - делать не нужно!!!! (с) Винни-Пух

Skype, Telegram - Sticher78
*

noopp

  • Новичок
  • 7
  • 0 / 0
Спасибо, думаю что теперь я освою
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться