Изображение не видно на мобильной версии [закрыто] ⇐ CSS

[Anonymous]

Использование медиа -запроса для изменения того, как Flexbox отображает содержимое веб -сайта, изображение, которое должно быть на втором элементе внутри Flexbox, просто появляется. Я не уверен, что он не в кадре или не отображается. />

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

@media only screen and (max-width: 767px) {
.content {
order: 4;
display: flex;
align-items: center;
position: relative;
flex-grow: 2;
flex-shrink: 1;
border: 0;
overflow-x: hidden;
overflow-y: visible;
position: sticky;
clear: both;
padding: 1vw 0vw;
text-align: justify;
text-justify: inter-word;
flex-direction: column;
margin: 0;
}

.content.small {
height: fit-content;
min-height: 35vh;
max-height: 60vh;
order: 4;
}

.sidebyside {
display: flex;
flex-direction: column;
align-items: flex-start;
border: 0;
width: 100vw;
height: fit-content;
margin: 0;
flex-grow: 1;
flex-shrink: 1;
min-height: 40vh;
max-height: 90vh;
}

.contenttitle {
width: 100vw;
float: left;
order: 10;
min-height: 8vh;
max-height: 12vh;
text-align: center;
overflow: visible;
border: 0;
}

.longertext {
width: 99vw;
height: auto;
flex-grow: 1;
flex-shrink: 1;
border: 0;
margin: 0;
display: flex;
align-items: flex-start;
flex-direction: column;
margin: 0vw 0.5vw 0vw 0.5vw;
}

.landing.text {
width: 99vw;
height: auto;
flex-grow: 1;
flex-shrink: 1;
border: 0;
margin: 0;
order: 11;
margin: 0vw 0.7vw 0.4vw 0.7vw;
}

.contenttext {
width: 100vw;
min-height: 40vh;
max-height: 70vh;
display: flex;
overflow-y: hidden;
flex-grow: 1;
flex-shrink: 1;
border: 0;
margin: 0;
object-fit: contain;
}

.landingimage {
width: 99vw;
height: auto;
margin: 0.5vw 0.8vw 0.5vw 0.8vw;
object-fit: contain;
}

}< /code>
      



TITLE!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



[img]image.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... le-version