add viewport

css/style.scss

@@ -31,7 +31,8 @@ img {
 }
 
 @mixin content { 
-	width: 1100px; 	
+	width: 1100px;
+	max-width: 90%; 	
 	margin: 0 auto;
 }
 
@@ -117,6 +118,23 @@ header {
 					border-top: 1px solid #980052;
 				}
 			}
+			.hide-menu {
+				position: relative;
+				display: none;
+				ul {
+					li {
+						padding-top: 15px;
+						display: block;
+					}
+				}
+				.hide-menu-list {
+					position: absolute;
+					display: none;
+				}
+			}
+			.hide-menu:hover .hide-menu-list {
+				display: block;
+			}
 		}
 	}
 	section.content {
@@ -178,7 +196,7 @@ main {
 		.stuff {
 			border: 1px solid #980052;
 			float: left;
-			width: calc(33% - 13px) ;
+			width: 350px;
 			padding: 10px;
 			position: relative;
 			article span {
@@ -517,14 +535,56 @@ footer {
 	background: url(../img/icon_top.png) no-repeat;
 }
 //---------------------------------------------
-@media screen and (orientation: portrait) {
-	/* body {
-		display: none
-	} */
-   	div.header-logo {
+@media screen and (max-width: 1200px) {
+	   	header div.shadowslider section.content nav.menu li:last-child {
    		display: none;
    	}
+}
+@media screen and (max-width: 1114px) {
+   	header div.shadowslider section.content div.header-logo {
+   		display: none;
+   	}
+   	header div.shadowslider {
+   		height: 50px;
+   	}
    	header section.content .arrow {
    		display: none;
    	}
+   	header div.shadowslider section.content nav.menu ul {
+   		padding-top: 10px;
+   	}
+   	main .content {
+   		display: flex;
+   		justify-content: center;
+   	}
+   	main .content div#stuff3.stuff {
+   		display: none;
+   	}
+   	section .back-content .back-content-right {
+   		display: none;
+   	}
+   	footer section.footer-content .footer-content-body {
+   		flex-flow: column;
+   	}
+   	footer .footer-content .footer-content-body .footer-content-left {
+   		margin-top: 10px;
+   	}
+   	footer .footer-content .footer-content-body .footer-content-center {
+   		margin-top: 20px;
+   	}
+   	footer .footer-content .footer-content-body .footer-content-right {
+   		margin-top: 20px;
+   	}
+}
+@media screen and (max-width: 924px) {
+	header div.shadowslider section.content {
+		flex-flow: row;
+		justify-content: flex-start;
+	}
+	header div.shadowslider section.content nav.menu {
+		display: none;
+	}
+	header div.shadowslider section.content nav.hide-menu {
+		display: block;
+	}
 }

index.html

@@ -28,6 +28,21 @@
 						<li><input type="search" placeholder=""></li>
 					</ul>
 				</nav>
+				<nav  class="hide-menu">
+					<ul>
+						<li>
+							<a href="#" class="desc-m"><i class="fa fa-bars" aria-hidden="true"></i></a>
+							<ul class="hide-menu-list">
+								<li><a href="#">Главная</a></li>
+								<li><a href="#">Каталог</a></li>
+								<li><a href="#">Доставка</a></li>
+								<li><a href="#">Отзывы</a></li>
+								<li><a href="#">О нас</a></li>
+								<li><a href="#">Контакты</a></li>
+							</ul>
+						</li>
+					</ul>
+				</nav>
 			</section>
 		</div>
 		<section class="content">