html - How do I center a div with a max-width, and if the window is smaller than the div, the div will still have some margin space on each side? -
i have div has max-width, , centered:
.div1 { background-color: #eee; max-width: 600px; margin: auto; }
the div gets automatically centered, want have margin of 20px on left , right side, if window gets smaller 600px.
here jsfiddle of trying accomplish: fiddle . add properties of div2 div1, without losing ability center div1.
use media query specify when override margins , give them 20px on each side.
css:
.div1 { background-color: #eee; max-width: 600px; margin: 0 auto; } @media screen , (max-width: 640px) { .div1 { margin-left: 20px; margin-right: 20px; } }
Comments
Post a Comment