align in css3 responsive design
Question
i'm using media queries and when i'm in tablet view i have 3 sections: 2 that have 50% width and the 3 that have 100% width. the problem is that i want the section below will be aligned with the other sections. and i don't understand why they are not aligned.
/********** Base styles **********/ * { box-sizing: border-box; padding: 0px; margin: 0px; } body { font-family: 'Open Sans', sans-serif; font-size: 14px; } h1 { font-weight: 800; font-size: 3em; text-align: center; padding: 30px; margin-bottom: 30px; } .row { width: 100%; position: relative; } section { position: relative; background-color: #ECECE0; width: 95%; margin:10px auto 20px auto; left:0; } h2 { position: absolute; top:0; right: 0; border: 1px solid black; font-weight: 600; text-align: center; padding:3px 30px; font-size: 1.5em; width: 150px; } p { border: 1px solid black; padding: 45px 15px 10px 15px; height: 180px; overflow: hidden; font-weight: 400; } #chickenP h2 { background-color:#FFBB00; } #beefP h2 { background-color:#880000; color:#fff; } #sushiP h2 { background-color:#339933; color:#fff; } /********** desktop only **********/ @media (min-width: 992px) { .col-lg-4 { width: 33.33%; float: left; } } /********** tablet only **********/ @media (min-width: 768px) and (max-width: 991px) { .col-md-6, .col-md-12 { float:left; } .col-md-6 { width: 50%; } .col-md-12 { width: 100%; } } /********** mobile only **********/ @media (max-width: 767px) { .col-sm-12 { float: left; width: 100%; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sivan Giora module2-solution</title> <link rel="stylesheet" href="css/style.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <h1>Our Menu</h1> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-12"> <section id="chickenP"> <h2>Chicken</h2> <p>Lorem ipsum dolor sit amet, luctus nesciunt, hendrerit vitae labore in sagittis, urna lectus urna dolor suspendisse lectus. Non porttitor odio purus libero wisi. Sociis erat sed fermentum fermentum duis, lorem in, augue justo mauris proin risus eros tempus, eligendi et consequat tristique voluptas ac velit. </p> </section> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <section id="beefP"> <h2>Beef</h2> <p>Dolor ornare nibh dolor, maecenas massa, justo donec nisi, in pede phasellus et eget magna felis. Mauris donec ut dui libero elit, sit proin convallis sodales vulputate lorem tellus, feugiat cursus ipsum. Ipsum enim nulla, ante libero ullamcorper in volutpat risus bibendum, aliquam suscipit ante, vestibulum sit mauris fusce vitae purus vulputate, wisi facilisi. </p> </section> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <section id="sushiP"> <h2>Sushi</h2> <p>Vel elementum aliquet, sapien per ratione, gravida nisl pede ipsum. Justo praesent a ligula neque ipsum, commodi suscipit, nunc mauris mauris elementum quam. At proin lacinia urna diam aliquam amet, cras nonummy ultrices et, felis et molestie, posuere habitasse wisi.</p> </section> </div> </div> </div> </body> </html>
3 answers
solution1
2 2016-04-11 18:26:44
in css file,you must use margin for space in section,not width
Because you define for div width:X%; sorry for my bad explain, this is true.
section{
position: relative;
background-color: #ECECE0;
margin:10px 20px;
left:0;}
solution2
2 2016-04-11 18:27:07
Your sections have width 95% (of your col-md-6 and col-md-12) and when they're all equal size that percentage is the same, but when Sushi is on its own row the numbers don't add up anymore. Adding
section {
margin: 5px;
width: auto;
}
in your media query will fix this. Keep in mind that you do need the margin since your previous css had left and right margin at auto, which you can no use anymore.
solution3
0 2016-04-13 04:41:20
thank you for your answer it solve my problem, but in the end i succeeded by removing the width from the section selector,and giving padding to the div selector that is the section parent.
.row > div { padding: 15px; } section { position: relative; background-color: #ECECE0; margin:10px auto 20px auto; left:0; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.