How do I make a background-image with width in pixels do not stay static on a website page?

1

I have several background images with a certain width in pixels and underneath these images I have one or two titles with background-color (with a color rectangle behind also with the width in pixels equal to that of the image so aligned) and text beneath the headings.

My problem is that when I resize the page, the text moves to the left, but the image and title / s become static and disappear from the page and I want the image to be o / s title / s would move like the text without losing the alignment.

This is the code I have in one of the sections for example:

.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%;
    }
}

Thanks to anyone who gives feedback

    
asked by anonymous 09.01.2017 / 15:32

1 answer

0

You are setting the width with and changing the placement with%, they will never be the same. You should always use% instead of px to construct responsive elements and for positioning use the position relative property and top, left, bottom or right to set the position, margin is not for that.

    
10.01.2017 / 20:37