Eu tenho várias imagens em background com uma determinada width em pixels e por baixo dessas imagens tenho um ou 2 títulos com background-color (com um retângulo de cor por trás também com a width em pixels igual à da imagem de modo a ficarem alinhados) e texto por baixo dos títulos.
O meu problema é que quando dou resize na página, o texto move-se para a esquerda mas a imagem e o/s título/s ficam estáticos e acabam por ir desaparecendo da página e eu queria que a imagem os o/s título/s se movessem como o texto sem perder o alinhamento.
Este é o código que tenho numa das seções por exemplo :
.sec-3 .container .image-sec-3{
background-image: url(/img/corebusiness1.jpg);
background-size: contain;
background-repeat: no-repeat;
margin: 2% auto 0% 6.2%;
height: 300px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}<br>
.sec-3 .container .title-sec-3 h3{
text-align: center;
margin: -51% 0% 0% 81.5%;
}
.sec-3 .container .text-sec-3 p{
margin: -37% -100% 0px 126%;
}
E este é o código da media-query em que o problema começa a aparecer :
@media (max-width: 767px) /*Small devices/Tablets*/{
.sec-3 .container .image-sec-3{
margin: 5% 0px 0px 25%;
width: 400px;
}
.sec-3 .container .title-sec-3 h3{
margin: -5% 0% 0% 22.5%;
width: 400px;
}
.sec-3 .container .text-sec-3 p{
margin: 3% auto 0px 10%;
}
}
Obrigado a quem der feedback