.promo-product1 aside:nth-child(1) .caption{
margin-top: 185px;
left: -10px;
}
Вот таким способом вроде выровнял, на на мобильной версии все теряется и сдвигается хз куда.. Может кто то предложит более коректную аналогию ?
на на мобильной версии все теряется и сдвигается
почитайте про медиа запросы css
Не очень понимаю, сами виджеты вроде как флекс боксами … но из за того что надписи сдвинул
.promo-product1 aside:nth-child(1) .caption{
margin-top: 183px;
left: -10px;
}
.promo-product1 aside:nth-child(2) .caption{
margin-top: 148px;
left: -10px;
}
.promo-product1 aside:nth-child(3) .caption{
left: -10px;
}
.promo-product1 aside:nth-child(4) .caption{
left: -10px;
}
.promo-product1 aside:nth-child(5) .caption{
left: -10px;
}
.promo-product1 aside:nth-child(6) .caption{
left: -160px;
margin-top: 123px;
white-space: pre;
}
На мобильной версии все сдвинулось
На мобильной версии все сдвинулось
Вот медиазапросы (которые Вам и посоветовал kw56) и помогают разделить css-стили для разных разрешений.
Выберите какое-нибудь руководство из гугла, например, это и ознакомьтесь.
Должно получиться что-то типа:
@media (min-width: 768px) {
.promo-product1 aside:nth-child(1) .caption{
margin-top: 183px;
left: -10px;
}
.promo-product1 aside:nth-child(2) .caption{
margin-top: 148px;
left: -10px;
}
.promo-product1 aside:nth-child(3) .caption{
left: -10px;
}
.promo-product1 aside:nth-child(4) .caption{
left: -10px;
}
.promo-product1 aside:nth-child(5) .caption{
left: -10px;
}
.promo-product1 aside:nth-child(6) .caption{
left: -160px;
margin-top: 123px;
white-space: pre;
}
}