Бесплатная помощь по верстке
Страницы: Пред. 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)
Новые темыОбъявленияСвободное общение
22:23 Подскажите нормальный сервис накрутки ПФ 
15:44 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
09:57 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
19:33 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 
15:12 Несколько статей хорошо выдаются в Гугле, но отвратительно в Яндексе 
13:40 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
11:41 2Index - быстрая индексация страниц сайта и обратных ссылок 
01:35 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 
22:30 SOCKS5 приватные прокси на 30 дней для PayPal 
22:29 Google Voice аккаунты для бесплатных SMS и звонков 
22:29 PayPal аккаунты для любых целей 
20:15 Belurk — высокоскоростные анонимные прокси от 0,24 рублей 
19:25 Whatsapp рассылки и реселлерская программа 
17:01 Продажа горячих лидов под крипту / Crypto Leads for Sale 
16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 
20:43 Добро пожаловать в цифровой мир... 
15:59 Про мясо 
23:09 ПП от PMS remote.team - 200$ за команду 
13:28 Компьютерная мышь 
22:55 Ну что, кто куда деваете свои сайты? 
22:34 Используете беспроводные наушники?