How do you make the image adaptive?
-
It is necessary that the image be approximately increased or reduced depending on the size of the device ' s screen, and the block "e is moving relative to the size of the image. I've been breaking my head over this for a long time, maybe I'm doing something wrong, you can tell me what's wrong. Here's another reference to github: https://plupiks.github.io/Webovio-Full-Landing/
.features-block3 { padding-bottom: 165px; }.features-block3__wrapper {
display: flex;
align-items: center;
}.features-block3__left {
position: relative;
}.features-block3__image {
position: relative;
flex: 0 0 50%;
width: 735px;
min-height: 550px;
overflow: hidden;
}.features-block3__image img {
position: absolute;
z-index: 1;
max-width: 100%;
min-height: 550px;
object-fit: cover;
}.fetures-block3__quote {
position: absolute;
top: 372px;
left: 323px;
z-index: 10;
width: 453px;
min-height: 243px;
background: #ffffff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
}.quote__wrapper {
padding: 30px;
}.quote__text {
font-style: italic;
font-size: 16px;
line-height: 26px;
color: #4d533c;
margin-bottom: 24px;
}.quote__img {
width: 46px;
height: 46px;
background-image: url("../img/quote/quote-img1.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 20px 25px 43px rgba(0, 0, 0, 0.18);
margin-right: 14px;
}.quote__about {
display: flex;
align-items: center;
}.quote__title {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #4d533c;
}.quote__descr {
display: block;
font-size: 14px;
line-height: 21px;
color: #152934;
}.features-block3__container {
margin-left: 96px;
}.features-block3__right-wrapper {
margin-left: auto;
max-width: 420px;
}.features-block3__text {
margin-bottom: 90px;
}.features-block3__text p:first-child {
margin-bottom: 30px;
}.features-block3__descr {
color: rgba(33, 56, 66, 0.6);
}<div class="features-block3">
<div class="features-block3__wrapper">
<div class="features-block3__left">
<div class="features-block3__image">
<img src="img/features-block3-bg.png" alt="">
</div>
<div class="fetures-block3__quote quote">
<div class="quote__wrapper">
<p class="quote__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.”
</p>
<div class="quote__about">
<div class="quote__img"></div>
<div class="quote__about-inf">
<h3 class="quote__title">Angel Armstrong</h3>
<span class="quote__descr">Founder & CEO, Google</span>
</div>
</div>
</div>
</div>
</div>
<div class="container features-block3__container">
<div class="features-block3__right">
<div class="features-block3__right-wrapper">
<div class="title__wrapper">
<h2 class="title features-block3__title">
The wall new Balenciaga.com
</h2>
</div>
<div class="features-block3__text">
<p class="decr features-block3__descr">
This article is floated online with an aim to help you find the best dvd printing solution.
</p>
<p class="decr features-block3__descr">
Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs.
</p>
</div>
<a href="#" class="link">
<svg class="triangle-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-inline--fa fa-caret-right fa-w-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="150 0 192 512">
<path fill="curentColor"
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z">
</path>
</svg>
<span>See Case Study</span>
</a>
</div>
</div>
</div>
</div>
</div>
-
If we're talking about this image:
Then change those styles:
.features-block3__left { position: relative; width: 50%; /*а тут добавьте*/ } .features-block3__image { position: relative; flex: 0 0 50%; /*width: 735px; закоментируйте эту строку*/ min-height: 550px; overflow: hidden; }.fetures-block3__quote {
position: absolute;
top: 372px;
left: 40%; /для смещения цитаты относительно размера контейнера изображения в процентах/
z-index: 10;
width: 453px;
min-height: 243px;
background: #ffffff;
box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
border-radius: 8px;
}
