[add] mobile responsive design

aplus#8
tribikram 2 years ago
parent dbb6f10011
commit e6dc967c53
  1. 111
      public/frontend/css/style.css
  2. 2
      resources/views/contact.blade.php
  3. 6
      resources/views/service_detail.blade.php

@ -628,6 +628,7 @@ Responsive Codes
text-align: center;
letter-spacing: 0.001em;
color: #F54C5F;
line-height: 48px;
display: inline-block;
}
.enquiry-header h2::after{
@ -848,6 +849,10 @@ Responsive Codes
background-size: cover!important;
position: relative;
}
.contact-captcha{
display: flex;
gap: 2rem;
}
.get-in-touch-section{
padding: 3rem 6rem;
background: #F5F5F5;
@ -979,7 +984,7 @@ Responsive Codes
.news-banner-desc h2{
font-weight: 700;
font-size: 60px;
line-height: 3rem;
line-height: 4rem;
color: #FFFFFF;
text-align: center;
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
@ -1064,6 +1069,7 @@ Responsive Codes
border: none;
box-shadow: none;
outline: none;
width: 100%;
}
.captch-field p{
font-weight: 400;
@ -1323,6 +1329,109 @@ Responsive Codes
width: 140%;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* contact us mobile view */
.about-banner-section .breadcrumb,
.contact-us-section .breadcrumb,
.need-chef-banner .breadcrumb{
display: none;
}
.get-in-touch-section,
.our-services-header p{
padding: 0;
}
.get-in-card{
padding: 2rem;
border-radius: 0;
}
.get-in-card .col-md-7::before{
display: none;
}
.contact-form{
margin: 0;
}
.contact-captcha{
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 10px;
}
/* footer mobile css */
.footer,
.news-update-section,
.bloghead-section,
.related-article,
.hiring-chef,
.permanent-visa-section,
.service-detail-second,
.service-detail-third,
.our-services-section,
.who-we-section,
.objectives-section,
.achievement-section,
.about-us-section,
.our-serivces-section,
.our-recruitment-section,
.news-and-update-section,
.clients-section,
.quick-enquiry-setion{
padding: 2rem;
}
.visa-services,
.recruitment,
.quick-links{
float: left;
}
.footer-bottom,
.blog-social{
display: flex;
flex-direction: column;
}
.footer-desc p{
margin-bottom: 20px;
}
.chef-banner-content h2,
.about-banner-content h2,
.contact-banner-content h2,
.services-banner-content h2,
.service-detail-desc h2,
.news-banner-desc h2{
font-size: 48px;
line-height: 3.3rem;
}
.blog-header h2,
.enquiry-contacts h2{
text-align: center;
font-size: 32px;
line-height: 44px;
margin-bottom: 15px;
}
.chef-hire-form button{
padding: 15px;
}
.service-detail-secone h3{
font-size: 32px;
line-height: 44px;
}
.service-detail-secone{
padding-right: 0;
}
.achievement-items{
flex-direction: column;
align-items: center;
padding: 0;
}
.news-and-update-section .row{
gap: 20px;
}
.more-news{
grid-template-columns: 1fr;
}
.chef-hire-form{
padding: 20px;
}
}
/* large screen */
@media screen and (min-width: 1600px){
.our-service-card{

@ -102,7 +102,7 @@
@endphp
<div class="col-md-12">
<label for="">Enter Captcha</label>
<div class="d-flex gap-3">
<div class="contact-captcha">
<div class="captcha-sec">
<input id="captcha" type="text" name = "entered_captcha_code" class="form-control" placeholder="Enter Captcha as Shown" required>
<input type = "hidden" id = "displayed_captcha_code" name = "displayed_captcha_code" value = "{{$code}}"/>

@ -22,7 +22,8 @@
<div class="row">
<div class="col-md-6">
<div class="service-detail-secone">
<h3>Employer Nomination <br> Scheme <br> Visa Subclass 186 <br> (Direct Entry Stream)</h3>
<h3>Employer Nomination Scheme </h3>
<h3>Visa Subclass 186 (Direct Entry Stream)</h3>
<p>This visa lets skilled workers, who are nominated by an employer, live and work in Australia permanently.</p>
</div>
</div>
@ -45,7 +46,8 @@
<div class="row">
<div class="col-md-6">
<div class="service-detail-secone">
<h3>Employer Nomination <br> Scheme <br> Visa Subclass 186 <br> (Temporary Residence Transition Stream)</h3>
<h3>Employer Nomination Scheme </h3>
<h3>Visa Subclass 186 (Temporary Residence Transition Stream)</h3>
<p>This visa lets skilled workers, who are nominated by an employer, live and work in Australia permanently.</p>
</div>
</div>

Loading…
Cancel
Save