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

[Anonymous]

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

Код: Выделить всё

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;
}< /code>




[list]
[*]



[url=#heart-and-v]Heart and Vascular Overview[/url]


[/list]






[b]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.[/b]

We have better ways than ever of
[b][u]diagnosing and treating[/u][/b]
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.








[b]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.[/b]

We have better ways than ever of
[b][u]diagnosing and treating[/u][/b]
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.



[img]https://media.istockphoto.com/id/531864277/photo/bandra-worli-sea-link.jpg?s=1024x1024&w=is&k=20&c=LEVMNyTuAwmrs4Y4pVKcaCf7uKrdcGcZqYg3moT_Jy0=[/img]
                      />

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