Бесплатная помощь по верстке
Страницы: Пред. 1 ... 18 19 20 21 22 След.
[ Закрыто ] Бесплатная помощь по верстке, Новичкам
Цитата
Kachok_cs пишет:
У меня простой вопрос.
 
Стоит запрет на просмотр кода. 
Извините, убрал запрет.
Настя Буланова, обратитесь к нему, тут то зачем?) Или это скрытая реклама?

Kachok_cs, да надо создать отдельный блок с количеством итемов равным плитке и все будет в ажуре) Либо задать высоту и текст опустить вниз.
Mamikonars, спасибо что помогаете в моей ветке +1 к карме)
Цитата
Kachok_cs пишет:
У меня простой вопрос.
Вот сайт: massagist.top
На нем мне нужно в одну линию чтобы через флекс бокс автоматом ровнялись эти блоки там где просмотры и подробнее в 1 ряд. Не как не могу сделать.
Это возможно?


Цитата
Kachok_cs пишет: 
У меня простой вопрос. 
Вот сайт: massagist.top 
На нем мне нужно в одну линию чтобы через флекс бокс автоматом ровнялись эти блоки там где просмотры и подробнее в 1 ряд. Не как не могу сделать. 
Это возможно? 

Возможно:
Код
.flex-element {
   display: flex;
   order: 0;
   flex: 1 150px;
   flex-flow: column nowrap;
}

.article-title {
   margin-bottom: auto;
}
Изменено: Oleg - 7 Апреля 2018 18:21
Цитата
Oleg пишет:
Цитата
Kachok_cs пишет:
У меня простой вопрос.
Вот сайт: massagist.top
На нем мне нужно в одну линию чтобы через флекс бокс автоматом ровнялись эти блоки там где просмотры и подробнее в 1 ряд. Не как не могу сделать.
Это возможно?

Возможно:
Код
 .flex-element {
   display: flex;
   order: 0;
   flex: 1 150px;
   flex-flow: column nowrap;
}

.article-title {
   margin-bottom: auto;
} 
Внатуре помогло)) Вотето уровень:). Спасибо большое ребята) Сам бы не додумался(
Всех с праздником!
Спасибо:)

Ребята, снова тот же вопрос. Только немножко другой.
Можно ли так сделать чтобы всегда по 3 ряда было и не сбивалось при разных разрешениях и не съезжало как в данном случае?
http://prostir.in.ua/zamovnyky/ Вот страница.
В данном случае Forshtag стоит сам в ряду, а хочется чтобы всё было красиво один за одним и в ряду по 3 было.

Что можно сделать?
Цитата
Kachok_cs пишет:
Можно ли так сделать чтобы всегда по 3 ряда было и не сбивалось при разных разрешениях и не съезжало как в данном случае?
prostir.in.ua/zamovnyky/ Вот страница.
В данном случае prostir.in.ua/zamovnyky/forshtag/]Forshtag стоит сам в ряду, а хочется чтобы всё было красиво один за одним и в ряду по 3 было.

Что можно сделать?
Самое простое - сделать одинаковым размер всех картинок. А так, можно задать фиксированную высоту контейнера с картинкой. Например, так:

Код
.article-image.work-image > a {display: block; height: 150px; overflow: hidden;}
Это для десктопной версии. Для различных разрешений нужно прописать медиа-запросы типа такого:
Код
 @media (min-width: 768px;) and (max-width: 1199px;) {
.article-image.work-image > a {height: 120px;}
}
Для ещё меньших экранов нужно определить контрольные точки и подобрать медиа-запросы и переопределить количество в ряд. Например, на экране 480-640 рх лучше сделать блоки в 2 колонки, а меньше 480 рх уже есть смысл сделать в одну колонку.

Вместо .article-image.work-image > a возможно будет достаточно .article-image > a или .work-image > a просто я не знаю не использу.тся ли данные классы где-то ещё.
Цитата
UserMix пишет:
Цитата
Kachok_cs пишет:
Можно ли так сделать чтобы всегда по 3 ряда было и не сбивалось при разных разрешениях и не съезжало как в данном случае?
prostir.in.ua/zamovnyky/ Вот страница.
В данном случае prostir.in.ua/zamovnyky/forshtag/]Forshtag стоит сам в ряду, а хочется чтобы всё было красиво один за одним и в ряду по 3 было.

Что можно сделать?
Самое простое - сделать одинаковым размер всех картинок. А так, можно задать фиксированную высоту контейнера с картинкой. Например, так:
Код
 .article-image.work-image > a {display: block; height: 150px; overflow: hidden;} 
Это для десктопной версии. Для различных разрешений нужно прописать медиа-запросы типа такого:
Код
  @media (min-width: 768px;) and (max-width: 1199px;) {
.article-image.work-image > a {height: 120px;}
} 
Для ещё меньших экранов нужно определить контрольные точки и подобрать медиа-запросы и переопределить количество в ряд. Например, на экране 480-640 рх лучше сделать блоки в 2 колонки, а меньше 480 рх уже есть смысл сделать в одну колонку.

Вместо .article-image.work-image > a возможно будет достаточно .article-image > a или .work-image > a просто я не знаю не использу.тся ли данные классы где-то ещё.
Спасибо большое. Я сам бы не справился. Трудно мне с версткой:( Мне очень помогло. Правильно я сделал? Добавил на разных разрешениях))
Ребята. Снова что-то не так сделал наверное. Я перенес весь этот код в поиск.
Прописываю в поиске:

Поліграф

Этот код, который нормально в разделах работает:

.article-image.work-image > a {display: block; height: 150px; overflow: hidden;}


@media (min-width: 768px;) and (max-width: 1199px;) {
.article-image.work-image > a {height: 120px;}
}

В поиске снова чтото не так. Разве я не так сделал что-то?
Цитата
Kachok_cs пишет:
В поиске снова чтото не так. Разве я не так сделал что-то?
Тут названия в несколько строк из-за чего блоки снова разной высоты. Можно задать фиксированную высоту и названию (или всему контейнеру), но с таким разбросом 1-3 строки будет смотреться не очень. Лучше уменьшить шрифт чтобы название было не больше двух строк:
Код
.article-image.work-image h2 {font-size: 18px; height: 42px;}
На меньших разрешениях нужно будет уменьшить шрифт и высоту блока (добавить строку в прощлый медиа-запрос). Например, так:
Код
  @media (min-width: 768px;) and (max-width: 1199px;) {
.article-image.work-image > a {height: 120px;}
.article-image.work-image h2 {font-size: 16px; height: 38px;}
 } 
Ну и в остальные, соответственно.
UserMix, спасибо что помогаешь) +1
Rustam Alimov, сначала думал тема авторская, но потом увидел, что ты не против посторонних советов и решил тоже добавить свои 5 копеек smile:o
Страницы: Пред. 1 ... 18 19 20 21 22 След.
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
21:39 Подскажите где продвигать сайт. 
10:57 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
19:12 Мошенники-копирайтеры 
08:57 Индексация страниц 
23:16 Есть ли альтернатива Адсенсу и РСЯ? 
20:48 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
18:53 Настройка плагина для wordpress Price Shop 
15:15 Affiliate Top - партнерская программа нового уровня 
14:02 garantcoin.io - быстрый и надёжный сервис обмена криптовалюты GarantCoin 
04:12 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 
01:28 4money.me—сервис для быстрого и удобного обмена криптовалют 
22:38 BTCPro24 - автоматический обменник криптовалют 
21:38 WebKazna. Обмены криптовалют. Доставка наличных. 
19:49 CashFlow.best Ваш удобный обменник! 
10:26 Новости искусственного интеллекта 
04:26 Хром ругается на форум 
03:49 Точные прогнозы на футбол 
18:41 С юмором по жизни! 
14:22 SENDERSEX.COM - Тизерная партнёрка онлайн игры Эротические Фанты Онлайн 
20:32 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
09:37 Договорные матчи от ИИ