Бесплатная помощь по верстке
Страницы: Пред. 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;
} 
Внатуре помогло)) Вотето уровеньsmile:). Спасибо большое ребята) Сам бы не додумался(
Всех с праздником!
Спасибоsmile:)

Ребята, снова тот же вопрос. Только немножко другой.
Можно ли так сделать чтобы всегда по 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 просто я не знаю не использу.тся ли данные классы где-то ещё.
Спасибо большое. Я сам бы не справился. Трудно мне с версткойsmile:( Мне очень помогло. Правильно я сделал? Добавил на разных разрешениях))
Ребята. Снова что-то не так сделал наверное. Я перенес весь этот код в поиск.
Прописываю в поиске:

Поліграф

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

.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)
Новые темыОбъявленияСвободное общение
10:18 Яндекс выдача. Тема для АПдейтов, которые будут с 16.09 по 23.09.2018 включительно 
07:41 Реклама молодого сайта 
07:38 Что такое Яндекс Икс / Как накрутить Яндекс ИКС 
19:35 31.08.2018 Апдейт Яндекс ИКС 
19:34 Заработок на Push-уведомлениях или как увеличить доход своего сайта на 50% и выше 
19:28 Офферы для монетизации сайта компьютерной тематики 
19:18 DreamCash.tl - заработок на онлайн-видео. До 95% отчислений, отличный конверт! 
10:20 Ссылка с морды 
10:20 Продвину сайт качественными ссылками. Рост посещаемости, позиций и ТИЦ. Множество отзывов, недорого + скидки 
08:18 Размещу ваши статьи на старом новостном сайте 
07:46 Продам акк Кворк 50 отзывов 
07:36 Продвижение в соц. сетях: ВК, Одноклассники, Instagram, Twitter, Facebook, YouTube, Качественное продвижение. Накрутка за отзыв 
07:27 LandingPage • Дизайн сайтов/форумов • Иллюстрации - Цены Вас приятно удивят!!! 
23:07 промокод на Яндекс Директ 
11:14 иКС ? 
10:59 Проблемный продавец Invisible007 
10:52 iphone 
09:54 Нужно сделать копию сайта 
09:48 Вопрос: что сделать? 
09:35 Куда ушли деньги с яндекс кошелька? 
00:48 E-mail рассылка