responsive on smallest screens under 35rem width

css/7-responsive.css

@@ -1,4 +1,4 @@
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 1023px) {
 	#main_title_container h2 {
 		margin-top: 15vh;
 	}
@@ -105,3 +105,59 @@
 		min-height:100vh;
 	}
 }
+
+
+@media screen and (max-width: 35em) {
+	#main_title{
+		margin-top: 5vh;
+}
+	#main_title_container h2 {
+		margin-top: 15vh;
+	}
+
+	#content_all h2, #welcome h2 {
+		font-size: 4rem !important;
+	}
+	#content_all .text{
+	padding-right:0;
+		 }
+	.container-text-md{
+		width: auto;
+	}
+	#content_all .columns{
+		width:100%;
+		margin: 1rem;
+	}
+	.flip-container .container-text{
+		width:100%;
+		left:5vw;
+	}
+	.flip-container .phone-container {
+
+		position: static;
+		margin: 4rem auto;
+	}
+	.flip-container.flip-from-left .container-text{
+		left: 5vw;
+	}
+	.flip-container .phone-container {
+
+		margin-top: 7rem;
+	}
+	.flip-container .text-description{
+		max-width: 90vw;
+	}
+
+	#content-4 {
+		margin-top: 50vh;
+	}
+	#content-5 {
+		margin-top: 45vh;
+	}
+
+	.slider-screen .text, .slider-screen .phone-container{
+		left: 5vw;
+		max-width: 90vw;
+	}
+
+}

index.html

@@ -188,6 +188,11 @@
 
 
   </div>
+	<section id="coming_soon">
+		<h2>
+			coming soon
+		</h2>
+	</section>
 
 
   <!--  other section-->

js/main.js

@@ -2,7 +2,9 @@
  * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
  */
 let development_debug = false
+
 let enable_animations = false
+// enable_animations = true
 
 if (enable_animations) {