В настоящий момент все на вашей странице имеют абсолютные размеры, а в некоторых случаях - абсолютные позиции на странице.
Существует два подхода, чтобы сделать вашу страницу отзывчивой:
Добавьте медиазапросов для всего на своей странице, чтобы изменить их размер для браузеров различной ширины.
@ media (min-width: 1000px) {... style the размер чего-либо здесь}
Укажите размер вещей относительно их родительских контейнеров.
Они также не являются взаимоисключающими. Если вы сделаете # 2, то вы можете использовать медиазапросы, чтобы настроить размер или положение вещей для лучшего расположения на некоторых размерах или ориентациях.
Даже если вы решите добавить несколько медиазапросов. Использование подхода относительного размера из # 2 будет означать, что вам почти наверняка понадобится меньше правил, чем нужно для подхода # 1.
В следующем примере у меня есть:
Сделал ваш родительский контейнер position: relative. Когда вы это делаете, любые абсолютно позиционированные дочерние элементы относятся к этому, а не к странице.
.sezione-cta {
position: relative;
}
Присвойте вашему cta-image-container размер относительно ширины страницы.
.cta-image-container {
width: 45vw;
height: 45vw;
}
С учетом ваших ViewBox-ов SVG, поэтому они автоматически масштабируются
viewBox="0 0 640 580"
Заданная ширина SVG составляет 100% от cta-image-container.
.svg-cta-image {
width: 100%;
}
Дайте вашему тексту "VIAGGA" размер и положение относительно его родительского элемента и ширины страницы.
.cta-image-container:after {
left: 25%;
font-size: 17vw;
}
AOS.init();
.sezione-cta {
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
height: 50px;
margin: 100px 0 250px 0;
font-family: 'Raleway', sans-serif;
position: relative;
}
.cta-image-container {
width: 45vw;
height: 45vw;
margin: 0 25px;
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
position: relative;
}
.cta-image-container svg {
position: absolute;
}
.svg-cta-image {
width: 100%;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}
.cta-image-container:after {
content: 'VIAGGIA';
position: absolute;
top: 0;
left: 25%;
font-size: 17vw;
font-weight: 600;
line-height: 0.5;
z-index: 0;
color: #000;
text-shadow: 6px 6px 7px rgba(0,0,0,0.5);
}
.sezione-cta .cta-text {
width: 350px;
margin: 0 25px 0 25px;
}
.sezione-cta h3 {
font-size: 35px;
margin: 0;
font-weight: 400;
}
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<svg class="split-defs" style="position:absolute;"><defs>
<clipPath id="split-1-3"><polygon points="222,580 0,580 0.12,0 176,0"></polygon></clipPath>
<clipPath id="split-2-3"><polygon points="400,0 196,0 242,580 446,580"></polygon></clipPath>
<clipPath id="split-3-3"><polygon points="640,0 420,0 466,580 640,580"></polygon></clipPath>
<filter id="desaturate"><feColorMatrix type="saturate" values="0"></feColorMatrix>
</filter></defs></svg>
<div class="sezione-cta sezione-cta-viaggia">
<div class="cta-image-container aos-init aos-animate" data-aos="fade-right" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out" data-aos-anchor-placement="bottom-bottom">
<div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
<svg class="svg-cta-image" viewBox="0 0 640 580"><image filter="url(#desaturate)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
</div>
<div data-aos="fade-down" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
<svg class="svg-cta-image" viewBox="0 0 640 580"><image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
</div>
<div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
<svg class="svg-cta-image" viewBox="0 0 640 580"><image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
</div>
</div>
<div class="cta-text aos-init aos-animate" data-aos="fade-left" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out"><h3>Per noi viaggiare significa <b>EMOZIONARSI</b>. Abbiamo gli ingredienti giusti per rendere <b>il tuo viaggio memorabile!</b></h3></div>
</div>