1

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

2
  • 1
    Coloque o código para que fique melhor, e que possamos ajuda-lo :)
    – LocalHost
    Commented 9/01/2017 às 14:34
  • 1
    Coloque seu código completo, HTML + CSS para que fique melhor a visualização do problema. Se possível, coloque em um JSBin, JSFiddle ou CodePen.. isso ajuda muito. Commented 9/01/2017 às 18:50

1 Resposta 1

0

Você está definindo o width com e alterando o posicionamento com %, nunca serão iguais mesmo. Vc sempre deve usar % ao invés de px para construir elementos responsivos e para posicionamento use a propriedade position relative e top, left, bottom ou right para setar a posição, margin não é para isso.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .