сайт messes up in small screen

Question

Я делаю сайт с бутстрапом, и хотя большая часть его отзывчива, есть несколько элементов, которые немного порчу, когда размер экрана уменьшается. Не могли бы вы рассказать мне, как исправить это?

Вот что элемент выглядит на большом экране.

А вот как это выглядит на маленьком экране

Есть ли способ, так что элемент поддерживает ту же позицию, даже в небольших экранах ?? Любые другие идеи, которые я должен сделать, это посмотреть на маленький экран?

Вот codepen ссылка - codepen link

.container{ 
    text-align: center; 
    width:80%; 

} 

.first{ 
    background:rgb(0,30,58); 
    color:white; 

} 
.span1,.span2{ 
    font-size:36px; 
    font-weight:bold; 
} 
.span1{ 
color:rgb(72,174,137); 
} 

[type="text"]{ 
    border-radius:25px; 
    padding-left:5px; 
} 

[type="submit"]{ 
    color:white; 
    background-color: rgb(72,174,137); 
    border-radius:25px; 
    position:relative; 
    margin-left:-25px; 
} 
.use{ 
    max-height:85%; 
    margin:0 auto; 

} 
.usediv{ 
    border:3px solid rgb(72,174,137); 

    padding-left: 10px; 
    padding-right: 15px; 
    width:80%; 
    margin:0 auto; 
    max-height:220px; 
} 
.usediv p{ 

    margin-top:10px; 
} 
.usediv img{ 
    position:relative; 
    top:-25px; 
} 

.box{ 
border:3px solid rgb(72,174,137); 
width:55%; 
margin:0 auto; 
max-height:210px; 
} 
/* 
.box .img-responsive{ 
    margin-top:-20px; 
} 
*/ 
.para{ 
    text-align: left; 
    margin-right:0; 
    padding-right:0; 
    padding-top:15px; 
} 
.para strong{ 
    font-weight:900; 
    font-size: 16px; 
} 

.second{ 
    margin-bottom:30px; 
    border:1px solid green; 
    width:10%; 
} 
.threebox{ 
    width:90%; 
    margin:0 auto; 
    padding-left:70px; 


} 
.col-md-4{ 
    height:40%; 
} 
.col-md-4 > p{ 
    background-color:white; 
    border:2px solid white; 
    border-top-color:green; 
    width:200px; 
    height:160px; 
    box-shadow:10px 10px 15px; 

} 
.positions{ 
    margin-top:60px; 
    position:relative; 
    margin-bottom:-50px; 
    z-index: 2; 
} 

.positions > h1{ 
    font-size:30px; 
    font-weight:bold; 


} 

.spanf{ 
    font-size:18px; 
    font-weight:bold; 
} 

.features{ 
    text-align: center; 
    padding-bottom:40px; 
    width:100%; 
    margin:0 auto; 
    background-color:rgb(242,243,245); 

    height:1840px; 
    z-index:1; 
    padding-top:120px; 

    border:2px solid red; 
} 


.features .row{ 

    width:65%; 
    margin:0 auto; 
    margin-top:40px; 

    padding-top:30px; 
    padding-left:20px; 
} 



.features button{ 
    border-radius:20px; 
} 


.features img{ 
    /*width:98%; 
    height:98%;*/ 

} 
/* 
.features .row .col-lg-6{ 

    padding-right:15px; 
    padding-left: 2px; 
}*/ 



/* 
.img2{ 
    position:relative; 
    left: 12px; 
top: -12px; 
box-shadow: -2px 2px 9px; 

} 
.img3{ 
    position:relative; 
    top:-12px; 
    left:-12px; 
    box-shadow:2px 2px 9px; 
} 

*/ 

.imgleft, .imgright{ 
    border:2px solid rgb(72,174,137); 
    margin-bottom: 10px; 

} 

.imgleft img{ 
    position:relative; 
    top:-15px; 
    left:15px; 
    box-shadow: 2px 2px 9px; 
} 

.imgright img{ 
    position:relative; 
    top:-15px; 
    left:-15px; 
    box-shadow: -2px 2px 9px; 
} 

.textleft p{ 
    text-align:left; 
} 
.textright p{ 
    text-align: right; 
} 





.pillars{ 
    border:2px solid rgb(72,174,137); 
    background-color: rgb(72,174,137); 
    height:350px; 
    margin-top:0; 
} 

Пожалуйста посоветуйте, какие изменения я должен сделать, чтобы исправить эту вещь.

Answer 1

Вы указали размеры в пикселях. Попробуйте обозначить их, используя%, где это возможно.
Вы можете использовать auto для высоты зеленого короба. Зеленая рамка отрегулирует ее высоту в зависимости от длины текста.

Answer 2

У меня есть два решения на данный момент для вас:

1), чтобы удалить max-height из .usediv.
Поверьте: Дивы будут «длиннее».
Check the output here

2) добавить overflow:auto; к .usediv.
Положим: у div все еще будет максимальная высота, и прокрутка с правой стороны появится для пользователей, НО изображение будет немного испорчено, так как оно не будет снаружи div как сейчас.
Check the output here

---

ИЛИ вы можете создать специальный CSS, используя медиазапросы из начальной загрузки:
@media(max-width:480px){}
@media(min-width:800px){}

Конечно, вы можете использовать любую ширину вам нужно, и вы можете создать более 1 в вашем CSS , И поэтому ваш основной стиль не будет испорчен, а для меньшего пространства вы можете выбрать другой способ отображения содержимого, использовать ли переполнение или увеличить высоту div.