Держите изображение на правой стороне просмотра браузера, используя HTML/CSS, когда ViewPort is> = 1140px ⇐ Html

[Гость]

Здесь я создал Stackblitz, в котором изображение всегда должно находиться на правой стороне, когда размер просмотра составляет> = 1140px. Я пытался сделать с помощью медиа -запроса, но каким -то образом он не работает. /> html:

• 
  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"
  >
  
  
  Heart and Vascular Overview
  

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.

We have better ways than ever of
diagnosing and treating
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.

No matter what your heart valve condition, our heart care
team is ready to help, with the latest technology and
treatments.



class="overview-section desktop-only overview-data-wrapper ng-star-inserted"
>




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.

We have better ways than ever of
diagnosing and treating
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.

No matter what your heart valve condition, our heart
care team is ready to help, with the latest technology
and treatments.




/>










css:
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,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-size: cover;
object-fit: cover;
position: absolute;
right: 0;
width: 260px;
z-index: 2;
}
}
}

.no-height {
min-height: auto;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... wport-is-1