.main{ width: 100%; min-width: 460px; max-width: 960px; margin: auto; flex: auto; box-sizing: border-box; } .box{ font-size: 1.25rem; line-height: 1.5; margin: 0 0 40px -50px; display: flex; flex-wrap: wrap; justify-content: center; } .box-base{ margin-left: 50px; flex: 1 0 430px; } .box-side{ margin-left: 50px; font: none; } .box-img{ max-width: 100%; height: auto; } .content{ margin-bottom: 30px; display: flex; flex-wrap: wrap; } .banners{ flex: 1 1 200px; } .banner{ background: #none; width: 100%; min-width: 100px; min-height: 200px; font-size: 3rem; color: #fff; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center; } .posts{ margin: 0 0 30px 30px; flex: 1 1 200px; } .comments{ margin: 0 0 30px 30px; flex: 1 1 200px; } .comment{ display: flex; } .comment-side{ padding-right: 20px; flex: none; } .comment-base{ flex: auto; } .comment-avatar{ background: #FFA985; width: 50px; height: 50px; } .footer{ background: #FF3366; width: 100%; max-width: 960px; min-width: 460px; color: #fff; margin: auto; padding: 15px; box-sizing: border-box; }
@media screen and (max-width: 800px) { .banners{ margin-left: -30px; display: flex; flex-basis: 100%; } .banner{ margin-left: 30px; } .posts{ margin-left: 0; } } @media screen and (max-width: 600px) { .content{ display: block; } .banners{ margin: 0; display: block; } .banner{ margin-left: 0; } .posts{ margin: 0; } } </style>
StandBase Посты Инфо В низ