Микросетки Продолжение. Испытание: Панель управления

Добрый день. Испытание прошел на 100%, но есть небольшая несостыковка. Картинке для адаптивности необходимо задать в css max-width: 100%; height: auto. Но при задании этих параметров картинка визуально становится меньше образца (в образце изображение немного растянуто по вертикали) и соответственно проверку не проходит. Проблема не только у меня, так что думаю это всё же баг, поэтому и решил сообщить сюда.

.tabs-list{
width : 180px;
margin : 0;
padding : 0;
display : flex;
flex-direction : column;
}
.tab {
margin : 15px 0px 0 0;
}
.tab:first-child {
margin : 0;
}
.active {
align-self : flex-end;
}

.content {
display : flex;
padding : 20px 30px;
flex-direction : column;
align-items : center;
width : 280px;
}
.author {
align-self : flex-start ;
order : -2;
margin-bottom : 15px;
}
.image {
order : -1;
margin-bottom : 2px;
max-width : 100%;
height : auto;
}
.title {
margin-bottom : 5px;
}
.message {
margin : 0 0 20px 0;
}

/Списку вкладок нужно задать ширину, а также обнулить внешние и внутренние отступы. Сами вкладки должны идти сверху вниз. Неактивные вкладки следует прижать к левому краю, а активную — к правому. Между вкладками нужно добавить отступы./

Зачем нужен этот код? Задание я и сам прошел на 100%. Визуально картинка в образце и картинка в готовом ответе всё равно отличаются. На скрине можно увидеть, что в образце картинка растянута


Нужно смотреть не на мини-браузер, а во вкладке “результат”.
Никаких ошибок там нет.
В академке бывает что в мини-браузере по одному выглядит, а во вкладке результат, немного по-другому. Вот и всё.

Если минибраузер есть, то он должен отображать фактическое состояние карточки. Иначе во всём этом нет смысла, он просто-напросто дезориентирует при написании кода и добавляет дополнительных танцев с бубном. Не думаю что такое поведение мини-браузера является нормальным. В большинстве испытаний всё работает нормально. Данные баги чаще всего встречаются как раз таки в курсе по Сеткам

Хз. Я во многих испытаниях такое замечал, и поэтому уже сразу ориентируюсь по вкладке “результат” и не парюсь, мне лично норм.

Добрый день. Объясните пожалуйста, почему в классе .image есть внешний отступ 2px. ?Ведь в макете его нет ! Я 2 день не могу разобраться по какой причине люди пишут этот отступ, на каком основании

Вроде как все правильно сверстал…
.tabs-list {
width: 180px;
margin:0;
padding:0;
display:flex;
flex-direction: column;
}
.tab {
margin-bottom:15px;
}
.active {
align-self:flex-end;
}

.content {
width:280px;
margin:0;
padding:20px 30px;
display:flex;
flex-direction: column;
align-items:center;
}
.author {
order: -1;
align-self: flex-start;
margin-bottom: 15px;
}
.image {
order: -1;
max-width:100%;
height:auto;
margin:0 0 15px 0;
}
.title{
order: 0;
margin:0 0 5px 0;
}

.message {
margin: 0 0 20px 0;
}

Дошел до момента, когда все перепробовал, но никак область контента не хочет выравниваться с активной областью вкладок.
image

Была у кого такая проблема?

3 лайка

Таа, знал бы я сам что я там делал месяц назад xD

Сейчас подписки нет, не могу химичить и смотреть, раз там есть такой отступ, значит он был мне необходим, видимо картинка была прижато как-то, вот и поставил отступ. Может вообще на глаз делал, у меня такое тоже может быть. В общем, если у вас 100% результат и без того отступа, значит люди напортачили включая меня или была раньше недоработка со стороны академии поэтому приходилось пихать там отступ. Более не могу ничего сказать :slight_smile:

Насколько могу судить, тебе просто нужно обнулить последний отступ в табе
Т.е. :
.tab:last-child {
margin-bottom : 0;
}

Спасибо, уже разобрался)

.tabs-list{
display: flex;
flex-direction: column;
width:180px;
margin: 0;
padding: 0;

}
.tab{
margin-bottom: 15px;
align-self: flex-start;
}
.active{
align-self: flex-end;
}
.content{
margin:0;
display: flex;
flex-direction: column;
width: 280px;
padding: 20px 30px;
}
.tab:last-child{
margin-bottom:0;
}
.author{
margin-top:0;
align-self: flex-start;
margin-bottom: 15px;
order: -2;
}
.image{
margin-top:0;
max-width: 100%;
height: auto;
order: -1;
align-self: center;
margin-bottom: 15px;
}
.title{
margin-top:0;
align-self: center;
margin-bottom: 5px;
}
.message{
margin-top:0;
align-self: center;
margin-bottom: 20px;
}
.reply-link{
align-self: center;
}

1 лайк

Ошибки в задании никакой нет, просто они как обычно решили проверить на творческость и не сказали про дополнительный отступ margin-bottom : 1.5px; так что код в самом верху был практически идеален)

.tabs-list {
width: 180px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.tab {
margin-bottom: 15px;
width: 160px;

}

.tab:last-child {
margin: 0;
}
.active {
align-self: flex-end;
}

.content {
display : flex;
padding : 20px 30px;
flex-direction : column;
align-items : center;
width : 280px;
}
.author {
align-self : flex-start ;
order : -2;
margin-bottom : 15px;
}
.image {
order : -1;
margin-bottom : 1.5px;
max-width : 100%;
height : auto;
}
.title {
margin-bottom : 5px;
}
.message {
margin : 0 0 20px 0;
}

Подскажите, почему для активного окна “сообщения” не работают классы .tab active и .tab-link messages, а срабатывает только просто .active?