work on mobile

OngDev · Aug 24, 2020 · 2abfd9b · 2abfd9b
1 parent 8cc6f7f
commit 2abfd9b
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -39,8 +39,8 @@
     <div class="posts-container">
         <div id="FeaturePosts">
           <div class="CarouselSlide">
-            <i class="fas fa-chevron-left" id='prevBtn'></i>
-            <i class="fas fa-chevron-right" id='nextBtn'></i>
+              <i class="fas fa-chevron-left" id='prevBtn'></i>
+              <i class="fas fa-chevron-right" id='nextBtn'></i>
                 <div class="Card_List"></div>
           </div>
         </div>

diff --git a/resources/css/index.css b/resources/css/index.css
@@ -134,7 +134,7 @@
 
 .Card_List{
   position: relative;
-  width: 1500px;
+  width: 1700px;
   height:360px;
   display: flex;
   padding-top: 5px;
@@ -183,29 +183,24 @@
 /*prev and nextbtn */
 #prevBtn{
   position: absolute;
-  font-size: 30px;
-  top:90%;
-  left: 6%;
   z-index: 2;
+  margin-top: 160px;
+  margin-left: 5px;
+  font-size: 30px;
   color: white;
   cursor: pointer;
 }
-#prevBtn:hover{
-  color: rgb(134, 131, 131);
-}
+
 #nextBtn{
   position: absolute;
-  font-size: 30px;
-  top: 90%;
+  margin-top: 160px;
+  right: 8.5%;
   z-index: 2;
-  right: 6%;
-  color: white;
+  font-size: 30px;
+  color:white;
   cursor: pointer;
+  margin-right: 11px;
 }
-#nextBtn:hover{
-  color: rgb(134, 131, 131);
-}
-
 
 /* Posts */
 #posts {

diff --git a/resources/css/responsive.css b/resources/css/responsive.css
@@ -111,4 +111,102 @@
   }
 }
  /*feature-post */
-
+ @media screen and (max-width: 1024px){
+  .CarouselSlide{
+    width: 76%;
+    margin-left:80px;
+  }
+  #nextBtn{
+    margin-right:160px;
+  }
+}
+ @media screen and (max-width: 768px){
+  .CarouselSlide{
+    width: 99%;
+    margin-left:0px
+  }
+  #nextBtn{
+    margin-right:50px;
+  }
+}
+@media screen and (max-width: 600px){
+  .CarouselSlide{
+    width: 60%;
+    margin-left:90px;
+  }
+  #nextBtn{
+    margin-right:75px;
+  }
+}
+@media screen and (max-width: 450px){
+  .CarouselSlide{
+    width: 64%;
+    margin-left:80px;
+  }
+  #nextBtn{
+    margin-right:55px;
+  }
+}
+@media screen and (max-width: 414px){
+  .CarouselSlide{
+    width: 70%;
+    margin-left:60px;
+  }
+  #nextBtn{
+    margin-right:50px;
+  }
+}
+@media screen and (max-width: 411px){
+  .CarouselSlide{
+    width: 70%;
+    margin-left:70px;
+  }
+  #nextBtn{
+    margin-right:30px;
+  }
+}
+@media screen and (max-width: 375px){
+  .CarouselSlide{
+    width: 76%;
+    margin-left:40px;
+  }
+  #nextBtn{
+    margin-right:30px;
+  }
+}
+@media screen and (max-width: 360px){
+  .CarouselSlide{
+    width: 76%;
+  }
+  #nextBtn{
+    margin-right:20px;
+  }
+}
+@media screen and (max-width: 320px){
+  .CarouselSlide{
+    width: 90%;
+    margin-left:20px;
+  }
+  #nextBtn{
+    margin-right:0px;
+  }
+}
+@media screen and (max-width: 280px){
+  .CarouselSlide{
+    width: 90%;
+    margin-left:0px;
+  }
+  .contentCard{
+    transform:scale(0.8);
+  }
+  #nextBtn{
+    margin-right:10px;
+  }
+  #prevBtn{
+    margin-left:30px;
+  }
+}
+
+
+
+
diff --git a/resources/js/carousel.js b/resources/js/carousel.js
@@ -2,17 +2,13 @@ document.addEventListener('DOMContentLoaded',function(){
     var carouselSlide = document.querySelector('.Card_List');
     var carouselImg = document.querySelectorAll('.contentCard');
 
-    //
-
     var prevBtn = document.querySelector('#prevBtn');
     var nextBtn = document.querySelector('#nextBtn');
 
-    //
     let counter = 1;
     const size = carouselImg[0].clientWidth+20;
-
     nextBtn.addEventListener('click',()=>{
-        if(counter >= carouselImg.length - 3) return;
+        if(counter >= carouselImg.length - 4) return;
         carouselSlide.style.transition = "transform 0.5s ease-in-out";
         counter++;
         carouselSlide.style.transform = 'translateX('+ (-size * counter)+'px)';
@@ -24,5 +20,5 @@ document.addEventListener('DOMContentLoaded',function(){
         counter--;
         carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';
     });
-    
+
 },false)
diff --git a/resources/js/feature_post.js b/resources/js/feature_post.js
@@ -24,6 +24,11 @@ const DUMMY_FEATURE = [
       title: '5. Super ultra hot videos Super ultra hot videos Super ultra hot videos',
       view: '20.000',
     },
+    {
+      image: 'resources/images/dummyimage1.jpg',
+      title: '6. Super ultra hot videos Super ultra hot videos Super ultra hot videos',
+      view: '30.000',
+    },
   ];
 
   var listCard = document.getElementsByClassName('Card_List')[0];
@@ -35,14 +40,14 @@ const DUMMY_FEATURE = [
     var icon = document.createElement('i');
     var Content = document.createElement('div');
     var contentCard = document.createElement('div');
-
+    //featureImg
     featureImg.classList.add('FeatureImg');
     featureImg.setAttribute('src',DUMMY_FEATURE[i].image);
-
+    // featureTitle
     featureTitle.classList.add('FeatureTitle');
     var fTitle = document.createTextNode(DUMMY_FEATURE[i].title);
     featureTitle.appendChild(fTitle);
-
+    // featureView
     featureView.classList.add('FeatureView');
     icon.className = 'fas fa-eye';
     featureView.appendChild(icon);
@@ -58,7 +63,10 @@ const DUMMY_FEATURE = [
     contentCard.classList.add('contentCard');
     contentCard.appendChild(featureImg);
     contentCard.appendChild(Content);
-
+    
     listCard.appendChild(contentCard);
   }
 
+
+
+