Как спозиционировать блоки?

Question

[AL_DM]

пытаюсь сделать страничку с картой для сайта, чтобы она отображалась корректно и на мобильных утройствах, но не получается . При большом разрешении блоки разъезжаются по разные стороны, при маленьком увеличивается блок с текстом. Подскажите, как их можно нормально cпозиционировать по центру сайта так, чтобы при уменьшении или увеличении размера окна они изменялись пропорционально (карта и текст уменьшались и увеличивались), Ну или хотябы, чтобы на мобильных устройствах блок с картой и блок с текстом были друг под другом. Заранее спасибо.
https://codepen.io/lemonado/pen/QWjevaj

Comments

[Lord_Dantes]

Если вы хотите чтобы вам помогли, залетей код на песочницу. Например на codepen.io

[Ankhena]

Используйте @media и перестраивайте блоки при нужной ширине.
Например, на больших экранах карте 2/3, тексту 1/3. На мобилках в столбик.

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

Answer 1

[Azarius77]

На флекс:

.contact_info_ntp{
display:flex;
margin: 0 auto;
}
.map{
flex: 1 1 auto;
}
.map p{

}
.contact_info{
flex: 2 1 auto;
}
и добавить медиа запрос, указать flex-direction: column;

без медиа запросов
.contact_info_ntp{
display:flex;
flex-wrap: wrap;
}
.map{

}
.map p{

}
.contact_info{

}