Задание пропорциональных размеров комментария. Отзывчивая верстка
Верстаю макет Webovio. Есть рисунки, используемые при верстке
Наверстал следующее
.techno-articles {
margin-top: 104px;
}
.techno-articles__container {
}
.techno__block_container {
}
.techno-articles__items {
}
.techno-article__item {
}
.item__techno-article {
}
.item__techno-article_example {
}
.item__techno-article_content {
display: flex;
width: 100%;
}
@media (min-width: 769px) {
.item__techno-article_image {
width: 50%;
}
.item__techno-article_image img {
width: 100%;
height: auto;
}
.item__techno-article_body {
width: 50%;
}
.item__techno-article_body_content {
padding-top: calc(80 / (1441 * 2) * 100vw);
padding-left: calc(96 / 1441 * 100vw); /*136*/
padding-right: calc(133 / 1441 * 100vw); /*110*/
}
.item__techno-article_title {
color: rgba(77, 83, 60, 1);
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: calc(36 / 1440 * 100vw);
line-height: /*48px*/ 133%;
/* or 133% */
color: #4D533C;
}
.item__techno-article_text {
padding-top: /*12px*/ calc(24 / (1441 * 2) * 100vw);
color: rgba(33, 56, 66, 0.6);
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: calc(18 / 1440 * 100vw);
line-height: /*26px*/ 162%;
/* or 162% */
color: rgba(33, 56, 66, 0.6);
}
.first__p {
padding-bottom: calc(20 / (1441) * 100vw);
}
.second__p {
}
.item__techno-article_link {
color: rgba(33, 56, 66, 0.6);
font-size: calc(18 / 1440 * 100vw);
padding-top: calc(90 / 1440 * 100vw);
}
.item__techno-article_comment {
color: #4D533C;
background-color: #fff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
position: relative;
z-index: 400;
margin: -158px calc(664 / 1441 * 100vw) 0px calc(323 / 1441 * 100vw); /*604*/
width: calc(453 / 1441 * 100vw);
}
.item__techno-article_comment_ownership {
display: flex;
align-items: center;
padding-left: 30px;
}
.item__techno-article_comment_author_image {
width: 90px;
height: 90px;
}
.item__techno-article_comment_text {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
font-size: 16px;
line-height: 26px;
padding-top: 30px;
padding-left: 30px;
padding-right: 33px;
}
.item__techno-article_comment_author {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
.item__techno-article_comment_author_position {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
/* identical to box height */
color: #152934;
}
.item__techno-article_text > *:not(:last-child) {
margin-bottom: 0px /*calc(36 / 1440 * 100vw)*/;
}
}
@media (max-width: 768px/*696px*/) {
.item__techno-article_content {
flex-wrap: wrap;
text-align: center;
}
.item__techno-article_image {
flex: 1 1 100%;
}
.item__techno-article_body {
flex: 1 1 100%;
/*padding-left: 0;*/
}
.item__techno-article_image img {
width: 100%;
height: auto;
}
.item__techno-article_body_content {
padding-top: calc(80 / (1441 * 2) * 100vw);
padding-left: calc(96 / 1441 * 100vw); /*136*/
padding-right: calc(133 / 1441 * 100vw); /*110*/
}
.item__techno-article_title {
color: rgba(77, 83, 60, 1);
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: /*calc(36 / 1440 * 100vw)*/ 36px;
line-height: /*48px*/ 133%;
/* or 133% */
color: #4D533C;
}
.item__techno-article_text {
padding-top: /*12px*/ calc(24 / (1441 * 2) * 100vw);
color: rgba(33, 56, 66, 0.6);
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: /*calc(18 / 1440 * 100vw)*/ 18px;
line-height: /*26px*/ 162%;
/* or 162% */
color: rgba(33, 56, 66, 0.6);
}
.first__p {
padding-bottom: calc(20 / (1441) * 100vw);
}
.second__p {
}
.item__techno-article_link {
color: rgba(33, 56, 66, 0.6);
font-size: /*calc(18 / 1440 * 100vw)*/ 18px;
padding-top: calc(90 / 1440 * 100vw);
}
.item__techno-article_comment {
color: #4D533C;
background-color: #fff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
position: relative;
z-index: 400;
/*margin: 0px calc(664 / 1441 * 100vw) 0px calc(323 / 1441 * 100vw);*/ /*604*/
/* width: 100%;*/ /*calc(453 / 1441 * 100vw)*/
flex: 1 1 100%;
}
.item__techno-article_comment_ownership {
display: flex;
align-items: center;
justify-content: center;
/*padding-left: 30px;*/
}
.item__techno-article_comment_author_image {
width: 90px;
height: 90px;
}
.item__techno-article_comment_text {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
font-size: 16px;
line-height: 26px;
padding-top: 30px;
padding-left: 30px;
padding-right: 33px;
}
.item__techno-article_comment_author {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
.item__techno-article_comment_author_position {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
/* identical to box height */
color: #152934;
}
.item__techno-article_text > *:not(:last-child) {
margin-bottom: 0px /*calc(36 / 1440 * 100vw)*/;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Webovio</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<section class="techno-articles">
<div class="techno-articles__container techno__block_container">
<div class="techno-articles__items">
<div class="techno-article__item item__techno-article">
<div class="item__techno-article_example">
<div class="item__techno-article_content">
<div class="item__techno-article_image">
<img src="https://i.stack.imgur.com/muGEp.png" alt="technoDVD">
</div>
<div class="item__techno-article_body">
<div class="item__techno-article_body_content">
<div class="item__techno-article_title">The wall new Balenciaga.com</div>
<div class="item__techno-article_text">
<p class="first__p">This article is floated online with an aim to help you find the best dvd printing solution.</p>
<p class="second__p">Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs.</p>
</div>
<div class="item__techno-article_link">See Case Study</div>
</div>
</div>
</div>
<div class="item__techno-article_comment">
<div class="item__techno-article_comment_text">
“In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
</div>
<div class="item__techno-article_comment_ownership">
<div class="item__techno-article_comment_author_image">
<img src="https://i.stack.imgur.com/7jjPo.png" alt="Author comment">
</div>
<div class="item__techno-article_comment_author_info">
<div class="item__techno-article_comment_author">Angel Armstrong</div>
<div class="item__techno-article_comment_author_position">Founder & CEO, Google</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body>
</html>Есть верстка комментария (div class="item__techno-article_comment") и стили для него (отзывчивый комментарий для min-width: 768px и занимающий полное пространство для max-width: 768px)
.techno-articles {
margin-top: 104px;
}
.techno-articles__container {
}
.techno__block_container {
}
.techno-articles__items {
}
.techno-article__item {
}
.item__techno-article {
}
.item__techno-article_example {
}
.item__techno-article_content {
display: flex;
width: 100%;
/*flex-wrap: wrap;
justify-content: center;
flex-direction: row;*/
}
@media (min-width: 769px) {
.item__techno-article_image {
width: 50%;
/*
background-image: url('../img/futurearticlesimages/technoDVD.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
*/
/*width: 100%;*/
/*height: auto;*/
/*
height: 0px;
padding-bottom: calc(735 / 550 * 100%);
*/
/*
display: block;
position: relative;
overflow: hidden;
resize: horizontal;
*/
}
/*
.item__techno-article_image::before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: calc(550 / 735 * 100%);
}*/
/*
.item__techno-article_image {
background-image: url('../img/futurearticlesimages/technoDVD.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
flex: 0 0 calc(735 / 1440 * 100%);
position: relative;
padding: 0px 0px calc(550 / 1440 * 100%) 0px;
}
*/
/*
.item__techno-article_image img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
*/
.item__techno-article_image img {
width: 100%;
height: auto;
}
.item__techno-article_body {
/*flex: 1 1 ;*/ /*auto*/ /*calc((1440 - 735) / 1440 * 100%)*/
width: 50%;
/* padding-top: calc(80px / 1441 * 100vw); */
/*padding-left: calc(96 / 1441 * 100vw);*/ /*136*/
/*padding-right: calc(133 / 1441 * 100vw);*/ /*110*/
}
.item__techno-article_body_content {
padding-top: calc(80 / (1441 * 2) * 100vw);
padding-left: calc(96 / 1441 * 100vw); /*136*/
padding-right: calc(133 / 1441 * 100vw); /*110*/
}
.item__techno-article_title {
color: rgba(77, 83, 60, 1);
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: calc(36 / 1440 * 100vw);
line-height: /*48px*/ 133%;
/* or 133% */
color: #4D533C;
}
.item__techno-article_text {
padding-top: /*12px*/ calc(24 / (1441 * 2) * 100vw);
color: rgba(33, 56, 66, 0.6);
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: calc(18 / 1440 * 100vw);
line-height: /*26px*/ 162%;
/* or 162% */
color: rgba(33, 56, 66, 0.6);
}
.first__p {
padding-bottom: calc(20 / (1441) * 100vw);
}
.second__p {
}
.item__techno-article_link {
color: rgba(33, 56, 66, 0.6);
font-size: calc(18 / 1440 * 100vw);
padding-top: calc(90 / 1440 * 100vw);
}
.item__techno-article_comment {
color: #4D533C;
background-color: #fff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
position: relative;
z-index: 400;
margin: -158px calc(664 / 1441 * 100vw) 0px calc(323 / 1441 * 100vw); /*604*/
width: calc(453 / 1441 * 100vw);
}
.item__techno-article_comment_ownership {
display: flex;
align-items: center;
padding-left: 30px;
}
.item__techno-article_comment_author_image {
width: 90px;
height: 90px;
}
.item__techno-article_comment_text {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
font-size: calc(16 / 1440 * 100vw)/*16px*/;
line-height: 26px;
padding-top: 30px;
padding-left: 30px;
padding-right: 33px;
}
.item__techno-article_comment_author {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
.item__techno-article_comment_author_position {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
/* identical to box height */
color: #152934;
}
.item__techno-article_text > *:not(:last-child) {
margin-bottom: 0px /*calc(36 / 1440 * 100vw)*/;
}
}
@media (max-width: 768px/*696px*/) {
.item__techno-article_content {
flex-wrap: wrap;
text-align: center;
}
.item__techno-article_image {
flex: 1 1 100%;
}
.item__techno-article_body {
flex: 1 1 100%;
/*padding-left: 0;*/
}
.item__techno-article_image img {
width: 100%;
height: auto;
}
.item__techno-article_body_content {
padding-top: calc(80 / (1441 * 2) * 100vw);
padding-left: calc(96 / 1441 * 100vw); /*136*/
padding-right: calc(133 / 1441 * 100vw); /*110*/
}
.item__techno-article_title {
color: rgba(77, 83, 60, 1);
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: /*calc(36 / 1440 * 100vw)*/ 36px;
line-height: /*48px*/ 133%;
/* or 133% */
color: #4D533C;
}
.item__techno-article_text {
padding-top: /*12px*/ calc(24 / (1441 * 2) * 100vw);
color: rgba(33, 56, 66, 0.6);
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: /*calc(18 / 1440 * 100vw)*/ 18px;
line-height: /*26px*/ 162%;
/* or 162% */
color: rgba(33, 56, 66, 0.6);
}
.first__p {
padding-bottom: calc(20 / (1441) * 100vw);
}
.second__p {
}
.item__techno-article_link {
color: rgba(33, 56, 66, 0.6);
font-size: /*calc(18 / 1440 * 100vw)*/ 18px;
padding-top: calc(90 / 1440 * 100vw);
}
.item__techno-article_comment {
color: #4D533C;
background-color: #fff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
position: relative;
z-index: 400;
/*margin: 0px calc(664 / 1441 * 100vw) 0px calc(323 / 1441 * 100vw);*/ /*604*/
/* width: 100%;*/ /*calc(453 / 1441 * 100vw)*/
flex: 1 1 100%;
}
.item__techno-article_comment_ownership {
display: flex;
align-items: center;
justify-content: center;
/*padding-left: 30px;*/
}
.item__techno-article_comment_author_image {
width: 90px;
height: 90px;
}
.item__techno-article_comment_text {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
font-size: 16px;
line-height: 26px;
padding-top: 30px;
padding-left: 30px;
padding-right: 33px;
}
.item__techno-article_comment_author {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
}
.item__techno-article_comment_author_position {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
/* identical to box height */
color: #152934;
}
.item__techno-article_text > *:not(:last-child) {
margin-bottom: 0px /*calc(36 / 1440 * 100vw)*/;
}
/*
.item__techno-article_link {
margin-top: 90px;
}
*/
}<div class="item__techno-article_content">
<div class="item__techno-article_image">
<img src="https://i.stack.imgur.com/muGEp.png" alt="technoDVD">
</div>
<div class="item__techno-article_body">
<div class="item__techno-article_body_content">
<div class="item__techno-article_title">The wall new Balenciaga.com</div>
<div class="item__techno-article_text">
<p class="first__p">This article is floated online with an aim to help you find the best dvd printing solution.</p>
<p class="second__p">Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs.</p>
</div>
<div class="item__techno-article_link">See Case Study</div>
</div>
</div>
</div>
<div class="item__techno-article_comment">
<div class="item__techno-article_comment_text">
“In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
</div>
<div class="item__techno-article_comment_ownership">
<div class="item__techno-article_comment_author_image">
<img src="https://i.stack.imgur.com/7jjPo.png" alt="Author comment">
</div>
<div class="item__techno-article_comment_author_info">
<div class="item__techno-article_comment_author">Angel Armstrong</div>
<div class="item__techno-article_comment_author_position">Founder & CEO, Google</div>
</div>
</div>
</div>Каким образом можно задать
margin: -158px calc(664 / 1441 * 100vw) 0px calc(323 / 1441 * 100vw);
width: calc(453 / 1441 * 100vw)
(в .item__techno-article_comment), чтобы получить резиновую верстку комментария по вертикали относительно размеров окна? А именно по вертикали - margin: -158px ...? Нужно, чтобы при уменьшении окна размеры комментария изменялись пропорционально.