Блок div смещается под другой div при уменьшении окна браузера!
Мужики надо что-бы при уменьшении окна, блоки вставали друг под друга. Как это сделать?
https://jsfiddle.net/ot18bcv5/
Можно прописать медиа-запрос.
h1,
h3 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.obshiy,
.obshiy2 {
border-radius: 10px;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap; /* Это свойство обеспечивает перенос элементов на новую строку */
}
.cc,
.ccg {
border: 2px solid black;
border-radius: 23px;
width: 160px;
height: 200px;
margin: 0.5% 2% 0.5% 2%;
text-align: center;
}
img {
margin: 10%;
}
/* Медиа-запрос для изменения стилей при уменьшении окна до 600px */
@media screen and (max-width: 600px) {
.cc,
.ccg {
width: 100%; /* При маленьком экране делаем ширину блоков равной 100% */
}
}
Должно сработать
@media (max-width: 800px)
{
Тут название первого дива
{
order: 1;
}
Тут название второго дива
{
order: 2;
}
} Примерно так, лучше к чату гпт обратись, нужно использовать функцию @media
Надеюсь правильно
