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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -