Динамически создавать 1 Div на строку при просмотре страницы на мобильном устройстве ⇐ CSS

[Anonymous]

Я знаю, что есть много вопросов, подобных этому, но я не уверен, как реализовать в моем случае. Поскольку ширина установлена ​​на 350px, она создает столько Divs/ряд, сколько может соответствовать. В моем ноутбуке страница выглядит нормально. Я играл с @media запросами, чтобы увидеть, как я могу показать один Div/ряд, но это была тяжелая битва, особенно с высотой изображения.@page
@model Products.Pages.NoLayoutModel
@{
Layout = null;
}
@Html.AntiForgeryToken()





Index






@foreach (var product in Model.availableProducts)
{







}





< /code>
и мой css: < /p>
.imgproduct {
height: 98%;
width: 98%;
object-fit: contain;
}
.divimage {
width: 100%;
height: 250px;
display: flex;
justify-content: center;
}
.divouterproductcontainer {
width: 25%;
float: left;
display: inline-block;
box-sizing: border-box;
}
.divinnerproductcontainer {
width: 95%;
border: 1px solid red;
}
@media only screen and (width < 1000px) {
.divouterproductcontainer {
width: 100%;
float: left;
display: inline-block;
}

}


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