Tablet Version Responsive Done

zaman20 · Oct 2, 2023 · e5baf52 · e5baf52
1 parent 1e715e8
commit e5baf52
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,8 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- main -->
     <link rel="stylesheet" href="style.css">
+    <!-- responsive css -->
+    <link rel="stylesheet" href="responsive.css">
 </head>
 <body>
     <section id="header">
@@ -57,15 +59,15 @@
         <div class="main-website">
            <div class="container">
             <div class="row">
-                <div class="col-lg-6">
+                <div class="col-lg-6 col-md-12 col-sm-12">
                     <a href="single.html">
                     <div class="entry-post" style="background: url('img/auto-2179220.webp') no-repeat;">
                         <h2>The Titel</h2>
                         <p>Date:30 June 2023</p>
                     </div>
                     </a>
                 </div>
-                <div class="col-lg-6">
+                <div class="col-lg-6 col-md-12 col-sm-12">
                     <div class="entry-two">
                         <div class="entry-box">
                             <img src="img/house-3963987.webp" alt="">
@@ -85,7 +87,7 @@ <h2>The Titel</h2>
 
             <!-- list post area -->
             <div class="row my-5">
-                <div class="col-lg-8 post-box">
+                <div class="col-lg-8 col-md-12 col-sm-12 post-box">
                     <h3 class="title">Read More</h3>
                     <div class="box">
                         <div class="box-img">
@@ -121,7 +123,7 @@ <h2>Having car insurance is a necessity in many states and can be a …</h2>
                     </div>
 
                 </div>
-                <div class="col-lg-3">
+                <div class="col-lg-3 col-md-12 col-sm-12">
                     <div class="sidebar">
                         <div class="sidebar-box">
                             <h3>About Me</h3>
@@ -167,12 +169,12 @@ <h2>About Us</h2>
                     </div>
                 </div>
                 <div class="row mt-4">
-                    <div class="col-lg-9">
+                    <div class="col-lg-9 col-md-8 col-sm-8">
                         <div class="copyright">
                             <p>&copy;copyright 2023 | All Rights Reserved</p>
                         </div>
                     </div>
-                    <div class="col-lg-3">
+                    <div class="col-lg-3 col-md-4 col-sm-4">
                         <div class="dev-text">
                             <p>Developed By-<a href="">ZA SOFT</a></p>
                         </div>

diff --git a/responsive.css b/responsive.css
@@ -0,0 +1,15 @@
+@media only screen and (min-width:200px) and (max-width:990px) {
+    .main-website {width: 90%;margin: 0 auto;}
+    .header-logo{width: 27%;margin-left: 56px;}
+    .header-menu{display: none;}
+    .header-search{width: 33%;}
+    .entry-post{margin: 0 auto;}
+    .entry-two{margin-top: 30px;}
+    .post-box{width: 95%;}
+    .sidebar{margin-top: 40px;}
+    .sidebar-box{float:left;margin-left: 13px;}
+    .footer-text{width: 296px;}
+    .search-content{width: 90%;}
+    input.search-text{width: 100%;}
+    input.search-btn{margin-left: -61px;}
+}
diff --git a/style.css b/style.css
@@ -237,7 +237,7 @@ img{
 .search-box{
     margin-bottom: 30px;
     background-color: #feffff;
-    box-shadow: 0 0 5px #eef4f4;
+    box-shadow: 0px 3px 0px 5px #eef4f4;
     position: absolute;
     z-index: 9;
     width: 100%;