[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 {
width: 3rem;
height: 2rem;
height: 3rem;
color: #212529;
}
@ -106,8 +106,8 @@ h2{
Responsive Codes
======================================= */
/* 980px */
@media (max-width: 62em) {
/* 1024px */
@media (max-width: 64em) {
html {
overflow-x: hidden;
}
@ -116,7 +116,6 @@ Responsive Codes
z-index: 999;
}
.header .logo {
width: 40%;
}
@ -370,7 +369,7 @@ Responsive Codes
text-align: center;
padding: 20px;
width: 90%;
min-height: 300px;
min-height: 350px;
background: #FFFFFF;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
border-radius: 16px;
@ -1381,9 +1380,6 @@ Responsive Codes
background: #296AC7;
}
.footer-text{
margin-top: 4px;
margin-left: 56px;
margin-bottom: -16px;
color: #FFFFFF;
}
.footer-text p{
@ -1394,3 +1390,134 @@ Responsive Codes
text-decoration: none;
}
/* 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>
</ul>
<div class="mobile-navbar-btn">
<ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>
<ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon>
<img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt="">
<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>
</header>
@ -237,6 +239,9 @@
<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>
<!-- hamburger link -->
<script type="text/javascript" src="{{url('frontend/js/index.js')}}"></script>
<!-- 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/slick-carousel/1.8.1/slick.min.js"></script>

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

Loading…
Cancel
Save