Here I have created stackblitz, in which the image should be always on right side when viewport size is >=1140px. I've tried to do with media query but somehow, it doesn't work.
The gap between image and text content should be 25px when viewport is 1240px.
h2 {
margin: 0;
}
.display-content {
display: block;
color: #00263a;
padding-bottom: 40px;
}
.mobile-tablet {
display: block;
}
@media (min-width: 768px) {
.mobile-tablet {
display: block;
}
.display-content {
display: block;
padding-bottom: 40px;
}
}
@media (min-width: 1140px) {
.content {
align-items: flex-start;
display: flex;
gap: 60px;
padding: 0 20px;
width: 100%;
max-width: 1280px;
justify-content: center;
}
.mobile-tablet {
display: none;
}
.display-content {
display: block;
padding-bottom: 80px;
}
}
@media (max-width: 1240px) {
.text-container {
padding: 0 40px 0 0 !important;
}
}
@media (max-width: 1285px) {
.overview-data-container .image-section img {
position: relative !important;
left: 20px;
}
}
@media (min-width: 1751px) {
.overview-data-container .image-section {
width: auto !important;
}
}
.overview-data-wrapper {
min-height: 490px;
}
.overview-data-container {
display: flex;
.text-container {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 25px 0 0;
z-index: 4;
&.padding-zero {
padding: 0;
}
}
.image-section {
width: 100%;
display: flex;
margin-top: -80px;
&.display-none-img {
display: none;
}
img {
-webkit-mask-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 490px;
mask-image: url('data:image/svg+xml;utf8,<svg width="885" height="541" viewBox="0 0 885 541" fill="none" xmlns=""><path fill-rule="evenodd" clip-rule="evenodd" d="M289.342 479.028V0C278.321 3.99949 267.361 8.36978 256.489 13.1084C252.641 14.9851 248.737 16.7462 244.846 18.5012C240.982 20.2442 237.131 21.9812 233.362 23.8196C211.195 34.6314 190.172 46.5905 170.572 59.4667C170.572 59.4667 139.238 80.8143 121.868 95.7299C104.782 110.132 88.6101 125.928 73.4192 143.05C62.5373 155.807 52.4004 169.513 43.0509 184.11C33.1032 198.948 24.239 214.986 16.5227 232.111C-3.50667 280.637 -6.15031 329.212 13.1392 371.828L15.0807 375.809C28.4471 403.214 49.6044 426.061 78.3741 443.585C132.518 476.92 207.896 488.6 289.342 479.028Z" fill="%23F1F3F5"/></svg>');
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="885" height="541" viewBox="0 0 885 541" fill="none" xmlns=""><path fill-rule="evenodd" clip-rule="evenodd" d="M289.342 479.028V0C278.321 3.99949 267.361 8.36978 256.489 13.1084C252.641 14.9851 248.737 16.7462 244.846 18.5012C240.982 20.2442 237.131 21.9812 233.362 23.8196C211.195 34.6314 190.172 46.5905 170.572 59.4667C170.572 59.4667 139.238 80.8143 121.868 95.7299C104.782 110.132 88.6101 125.928 73.4192 143.05C62.5373 155.807 52.4004 169.513 43.0509 184.11C33.1032 198.948 24.239 214.986 16.5227 232.111C-3.50667 280.637 -6.15031 329.212 13.1392 371.828L15.0807 375.809C28.4471 403.214 49.6044 426.061 78.3741 443.585C132.518 476.92 207.896 488.6 289.342 479.028Z" fill="%23F1F3F5"/></svg>');
mask-size: cover;
object-fit: cover;
position: absolute;
right: 0;
width: 260px;
z-index: 2;
}
}
}
.no-height {
min-height: auto;
}<div class="treatments-root ng-star-inserted">
<section class="content tabs outer-container">
<div class="quicknav-wrapper desktop-only sticky-nav">
<nav aria-label="Page content navigation">
<ul id="page-navigation">
<li id="overview-option" class="nav-option ng-star-inserted">
<svg
id="overview-svg"
width="6"
height="22"
viewBox="0 0 6 22"
fill="none"
xmlns=""
class="active-svg hide-svg"
>
<path
id="Rectangle 170"
d="M0.5 2.56849C0.5 1.14995 1.64995 0 3.06849 0C4.48703 0 5.63699 1.14995 5.63699 2.56849V19.4315C5.63699 20.85 4.48703 22 3.06849 22C1.64995 22 0.5 20.85 0.5 19.4315V2.56849Z"
fill="#3474A1"
></path>
</svg>
<a href="#heart-and-v" class="menu-title">Heart and Vascular Overview</a>
</li>
<!---->
</ul>
</nav>
</div>
<div class="tabs-wrapper">
<section id="overview-container" class="heading-wrapper ng-star-inserted">
<div class="overview-section mobile-tablet ng-star-inserted">
<div class="display-content">
<p>
<strong>With each heartbeat, your heart valves open and close,
keeping blood flowing. If your valves don’t work as they
should, it can cause problems.</strong>
</p>
<p>
We have better ways than ever of
<em><strong><u>diagnosing and treating</u></strong></em>
heart valve disease. In fact, we lead the way in the region
when it comes to advanced heart valve treatments. This
includes TAVR, which is a way to replace the aortic valve
without open heart surgery.
</p>
<p>
<em>No matter what your heart valve condition, our heart care
team is ready to help, with the latest technology and
treatments.</em>
</p>
</div>
</div>
<!---->
<div class="overview-section desktop-only overview-data-wrapper ng-star-inserted">
<div class="overview-data-container">
<div class="text-container">
<div class="display-content">
<p>
<strong
>With each heartbeat, your heart valves open and close,
keeping blood flowing. If your valves don’t work as they
should, it can cause problems.</strong>
</p>
<p>
We have better ways than ever of
<em
><strong><u>diagnosing and treating</u></strong></em>
heart valve disease. In fact, we lead the way in the
region when it comes to advanced heart valve treatments.
This includes TAVR, which is a way to replace the aortic
valve without open heart surgery.
</p>
<p>
<em
>No matter what your heart valve condition, our heart
care team is ready to help, with the latest technology
and treatments.</em>
</p>
</div>
</div>
<div class="image-section ng-star-inserted">
<img
alt=""
src=".jpg?s=1024x1024&w=is&k=20&c=LEVMNyTuAwmrs4Y4pVKcaCf7uKrdcGcZqYg3moT_Jy0="
/>
</div>
<!---->
</div>
</div>
</section>
<!---->
</div>
</section>
</div>