0

I have a css question about block left/right margin during responsive. I need something like this:

@media screen and (max-width: 1024px) {
  body .wrapper {
    width:100%;
  }
}
@media (min-width: 1024px) and (max-width: 1170px) {
  body .wrapper {
    width:70%;
     margin: 0% 5% 0% 25%;
  }
}
@media (min-width: 1170) and (max-width: 1600px) {
  body .wrapper {
    width:65%;
    margin: 0% 10% 0% 30%;
  }
}

html:

<body>
  <div class="wrapper">text here</wrapper>
</body>

When I change windows width from 1024px, it jumps with left margin 25%. IS there a way to make so that from 1024px , left margin smoothly increases(not jump) in percentage and at 1171px, it will reach to , for example 200px (left margin) at 1600px, 300px (for example) like with auto margin. For example, 

@media screen and (min-width: 1024px) {
      body .wrapper {
        width:1024px;
        margin:0 auto;
      }
    }

if window is increased , the wrapper block is in the middle and left and right margin will increase smoothly with equal margin. I need the same but with different left and right margin. Is this possible? I would appreciate your help.

Sandeep
  • 13
  • 6

1 Answers1

0

use something like this to make the transition smooth... 

transition: 0.5s ease-in-out 0.5s;
vitor13almeida
  • 139
  • 1
  • 11