[edit] mobile responsive

et#6
tribikram 2 years ago
parent ec8eb63e87
commit 738c8ed441
  1. 143
      public/frontend/css/style.css
  2. BIN
      public/frontend/icons/close.png
  3. BIN
      public/frontend/icons/hamburger.png
  4. BIN
      public/frontend/icons/menu.png
  5. BIN
      public/images/setting/2023/01/31/7359e82a8dab8ba5880900718342eea9.png
  6. BIN
      public/images/slider/2023/01/31/af01fab64613cc1de11ad0a6ef17a464.png
  7. 9
      resources/views/layout/app.blade.php
  8. 4
      resources/views/welcome.blade.php

@ -75,7 +75,7 @@ h2{
.mobile-nav-icon { .mobile-nav-icon {
width: 3rem; width: 3rem;
height: 2rem; height: 3rem;
color: #212529; color: #212529;
} }
@ -106,8 +106,8 @@ h2{
Responsive Codes Responsive Codes
======================================= */ ======================================= */
/* 980px */ /* 1024px */
@media (max-width: 62em) { @media (max-width: 64em) {
html { html {
overflow-x: hidden; overflow-x: hidden;
} }
@ -116,7 +116,6 @@ Responsive Codes
z-index: 999; z-index: 999;
} }
.header .logo { .header .logo {
width: 40%; width: 40%;
} }
@ -370,7 +369,7 @@ Responsive Codes
text-align: center; text-align: center;
padding: 20px; padding: 20px;
width: 90%; width: 90%;
min-height: 300px; min-height: 350px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
border-radius: 16px; border-radius: 16px;
@ -1381,9 +1380,6 @@ Responsive Codes
background: #296AC7; background: #296AC7;
} }
.footer-text{ .footer-text{
margin-top: 4px;
margin-left: 56px;
margin-bottom: -16px;
color: #FFFFFF; color: #FFFFFF;
} }
.footer-text p{ .footer-text p{
@ -1394,3 +1390,134 @@ Responsive Codes
text-decoration: none; text-decoration: none;
} }
/* Footer Css */ /* Footer Css */
/* mobile view css */
@media only screen and (min-width: 320px) and (max-width: 480px) {
.about-icons-section{
grid-template-columns: 1fr;
}
.services-section,
.blog-section,
.study-australia-desc,
.study-sydney-section,
.study-melbourne-section,
.study-detail-section,
.scholarship-section,
.student-visa-section,
.about-header-section,
.why-et,
.student-visa-section,
.blogs-section, .why-et,
.blog-detail-section,
.faq-section,
.why-us-section,
.testimonials-section,
.footer-top{
padding: 2rem;
}
.services-content,
.testimonials-desc {
margin-right: 0;
margin-bottom: 1rem;
}
.why-us-section::before{
display: none;
}
.why-us-img,
.blog-header p{
padding: 0;
margin-bottom: 1rem;
}
.service-card{
width: 100%;
}
.footer-text,
.footer-links{
margin: 0 !important;
}
}
/* mobile view css end */
/* ipad, tablets screen css */
@media only screen and (min-width: 481px) and (max-width: 768px) {
.about-icons-section{
grid-template-columns: 1fr 1fr;
}
.services-section,
.blog-section,
.study-australia-desc,
.study-sydney-section,
.study-melbourne-section,
.study-detail-section,
.scholarship-section,
.student-visa-section,
.about-header-section,
.why-et,
.student-visa-section,
.blogs-section, .why-et,
.blog-detail-section,
.faq-section,
.why-us-section,
.testimonials-section,
.footer-top{
padding: 3rem;
}
.service-card{
width: 100%;
}
.why-us-section::before{
display: none;
}
.services-content,
.testimonials-desc {
margin-right: 0;
margin-bottom: 1rem;
}
}
/* ipad, tablets screen css ends */
/* Small screens, laptops css */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.about-icons-section{
grid-template-columns: 1fr 1fr;
}
.services-section,
.blog-section,
.study-australia-desc,
.study-sydney-section,
.study-melbourne-section,
.study-detail-section,
.scholarship-section,
.student-visa-section,
.about-header-section,
.why-et,
.student-visa-section,
.blogs-section, .why-et,
.blog-detail-section,
.faq-section,
.why-us-section,
.testimonials-section,
.footer-top{
padding: 3rem;
}
.why-us-section::before{
display: none;
}
.service-card{
width: 100%;
}
.services-content,
.testimonials-desc {
margin-right: 0;
margin-bottom: 1rem;
}
}
/* Small screens, laptops css ends */
/* Desktops, large screens css */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
}
/* Desktops, large screens css ends */
/* Extra large screens, TV css */
@media screen and (min-width: 1201px) {
}
/* Extra large screens, TV css ends */

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

@ -91,8 +91,10 @@
</li> </li>
</ul> </ul>
<div class="mobile-navbar-btn"> <div class="mobile-navbar-btn">
<ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon> <img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt="">
<ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon> <img src="{{url('frontend/icons/close.png')}}" name="close-outline" class="mobile-nav-icon" alt="">
{{-- <ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon> --}}
{{-- <ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon> --}}
</div> </div>
</header> </header>
@ -237,6 +239,9 @@
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- hamburger link -->
<script type="text/javascript" src="{{url('frontend/js/index.js')}}"></script>
<!-- slick slider link --> <!-- slick slider link -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

@ -311,7 +311,7 @@
{ {
breakpoint: 1024, breakpoint: 1024,
settings: { settings: {
slidesToShow: 2, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,
infinite: true, infinite: true,
dots: false dots: false
@ -320,7 +320,7 @@
{ {
breakpoint: 600, breakpoint: 600,
settings: { settings: {
slidesToShow: 2, slidesToShow: 1,
slidesToScroll: 1 slidesToScroll: 1
} }
}, },

Loading…
Cancel
Save