Is there any reason why this is happening?the option box is not appearing below the box itself
The option appears normally on big screen, it’s just when I inspect and make it responsive it seems like the option box is not moving at all? are there any particular details why?
I am a new developer and would like to know more on how to prevent this happening, and if someone please tell me why it’s happening too? thank you
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta name/property starts -->
<meta name="description" content="CDA offers driving lessons in Cambridge and surrounding areas extending all through Cambridgeshire. CDA has a fully-qualified team of instructors ">
<meta property="og:title" content="Driving Lessons Cambridge | CDA">
<meta property="og:description" content="CDA offers driving lessons in Cambridge and surrounding areas extending all through Cambridgeshire. CDA has a fully-qualified team of instructors ">
<meta property="og:url" content="https://www.cambridgedrivingacademy.com">
<meta property="og:site_name" content="cambridge driving ac">
<meta property="og:type" content="website">
<meta name="google-site-verification" content="-U4J2qSZr6SaN8sIfVFsM1Kl280vQ5CifW_lt12tbeo">
<meta name="twitter:title" content="Driving Lessons Cambridge | CDA">
<meta name="twitter:description" content="CDA offers driving lessons in Cambridge and surrounding areas extending all through Cambridgeshire. CDA has a fully-qualified team of instructors ">
<!-- meta name close -->
<title>CDA | Cambridge Driving Academy | Driving School in Cambridge</title>
<!-- fas cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- personal css -->
<link rel="stylesheet" href="/css/style.css" text="css">
<link rel="stylesheet" href="/css/gallery.css" text="css">
<!-- custom css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="/css/enrolment.css">
<!-- swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<!-- llight gallery CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">
</head>
<body>
<!-- header section starts -->
<header>
<a href="#" class="logo">Cambridge <span>Driving Academy</span></a>
<a href="#" ><img src="imgs/CDA_NEWLogo.png" class="img-logo" alt=""></a>
<div class="navbar">
<a href="#home">Home</a>
<a href="index.html#courses">Courses</a>
<a href="instructors.html">Team</a>
<a href="index.html#about-us">About Us</a>
<a href="training.html">Instructor Training</a>
<a href="pricing.html">Prices</a>
</div>
<div class="icons">
<i class="fa-solid fa-bars" id="menu-bars"></i>
<a href="https://www.instagram.com/cambridgedriving/?hl=en" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://www.facebook.com/cambridgedrivingacademy" target="_blank">
<i class="fa-brands fa-facebook">
</i></a>
<a href="tel:07496 842781">
<i class="fa-solid fa-phone"></i>
</a>
</div>
</header>
<!-- ender ends -->
<div class="enrolment-logo">
<img src="/imgs/CDA_NEWLogo.png" alt="">
</div>
<!-- enrolment form starts -->
<div class="cda-form" id="contact">
<h1 class="heading">
<span>Enrolment Form</span>
</h1>
<div class="row">
<!-- <div class="image">
<img src="/imgs/contact.png" alt="contact-us">
</div> -->
<form action="contact-form.php" method="POST">
<span>Your Full Name</span>
<input type="text" required placeholder="Enter your name" id="name" class="box" maxlength="40">
<span>Your Email Address</span>
<input type="email" required placeholder="Enter your email" id="email" class="box" maxlength="40">
<span>Your Date of Birth</span>
<input type="date" required placeholder="Enter your email" id="email" class="box" maxlength="40">
<span>Your Address</span>
<input type="text" required placeholder="First Line Address" id="email" class="box" maxlength="40">
<input type="text" placeholder="Second Line Address" id="email" class="box" maxlength="40">
<input type="text" placeholder="Third Line Adress" id="email" class="box" maxlength="40">
<span>Your mobile number</span>
<input type="text" required placeholder="Enter your mobile number" id="number"
class="box" maxlength="99999999999" onkeypress="if(this.value.length == 10) return false;">
<span>Transmission Type </span>
<select name="Courses" id="courses" class="box" required>
<option value="" disabled selected> Select Transmission --</option>
<option value="Manual Driving Course">Manual</option>
<option value="Automatic Driving Course">Automatic</option>
</select>
<span>Licence Type </span>
<select name="Courses" id="courses" class="box" required>
<option value="" disabled selected> What type of licence do you have?</option>
<option value="Manual Driving Course">Provisional Licence</option>
<option value="Automatic Driving Course">
Full Automatic Licence</option>
<option value="Manual Driving Course">Full Licence</option>
<option value="Manual Driving Course">Foreign Licence</option>
</select>
<span>Your Driving Licence Number</span>
<input type="email" required placeholder="Enter your Driving Licence Number" id="email" class="box" maxlength="40">
<span>Theory Test </span>
<select name="Courses" id="courses" class="box" required>
<option value="" disabled selected>Pass or Failed</option>
<option value="Manual Driving Course">Passed</option>
<option value="Automatic Driving Course">Failed</option>
<option value="Automatic Driving Course">Not Taken</option>
</select>
<span>Practical Test </span>
<select name="Courses" id="courses" class="box" required>
<option value="" disabled selected>Pass or Failed</option>
<option value="Manual Driving Course">Passed</option>
<option value="Automatic Driving Course">Failed</option>
<option value="Automatic Driving Course">Not Taken</option>
</select>
<span>If you have an upcoming Theory and/or Practical Driving Test, please select one of the option </span>
<select name="Courses" id="courses" class="box" required>
<option value="" disabled selected>Test booked --</option>
<option value="Manual Driving Course">Theory Test</option>
<option value="Automatic Driving Course">Driving Test</option>
<option value="Automatic Driving Course">Nothing Booked at the moment</option>
</select>
<Span>If you have already your Practical Driving Test booked, please provide booking reference number, test date, time and test centre:<Span>
<textarea name="message" id="message" cols="30" rows="3" placeholder="Type of test, Booking Ref #, Test Date, Time and Test Centre"></textarea>
<Span>Driving Experience<Span>
<textarea name="message" id="message" cols="30" rows="7" placeholder="Additional Information"></textarea>
<h1 class="heading">
Parent/s or Guardian/s
</h1>
<span>Parents or Guardian's name</span>
<input type="text" required placeholder="Enter your name, enter N/A if not applicable" id="name" class="box" maxlength="40">
<span>Parents or Guardian's Email Address</span>
<input type="text" required placeholder="Enter your guardian's email address, enter N/A if not applicable" id="name" class="box" maxlength="40">
<span>Parents or Guardian's Contact Phone Number</span>
<input type="text" required placeholder="Enter your guardian's contact number, enter N/A if not applicable" id="name" class="box" maxlength="40">
<input type="submit" value="Submit Form" class="btn">
</form>
</div>
</div>
<!-- enrolment form ends -->
<!-- scripts -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js"></script>
<script src="/js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
AOS.init({
duration:800,
offset:150,
})
lightGallery(document.querySelector('.gallery .gallery-container'));
</script>
<!-- script ends -->
</body>
</html>
css code :
.enrolment-logo img {
height:8rem;
}
.enrolment-logo {
text-align: center;
margin-top:5%;
}
.cda-form {
background-color: #fff;
padding:2% 15%;
text-align: center;
width:80%;
margin: 0 auto;
}
.cda-form .heading span {
color:var(--primary-color);
}
.cda-form .row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap:1.5rem;
}
.cda-form .row .image{
flex: 1 1 40rem;
text-align: center;
}
.cda-form .row .image img {
width:60%;
}
.cda-form .row form .box,textarea{
width:100%;
margin-top: 1rem;
margin-bottom: 2rem;
border-radius: .5rem;
background-color:white;
box-shadow: var(--box-shadow);
font-size: 1.8rem;
color:var(--black);
resize: none;
padding:1.4rem;
font-family: 'Poppins', sans-serif;
}
.cda-form .row form {
flex: 1 1 20rem;
}
.cda-form .row form span {
color:var(--primary-color);
font-size: 1.6rem;
}
input,option {
text-align: center;
}
::-webkit-input-placeholder {
text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
text-align: center;
}
:-ms-input-placeholder {
text-align: center;
}
@media(max-width:1400px){
.enrolment-logo {
text-align: center;
margin-top:10%;
}
}
@media(max-width:850px){
.enrolment-logo {
text-align: center;
margin-top:20%;
}
.cda-form .heading span{
font-size: 5rem;
}
.cda-form .row form .box,textarea{
font-size:1.5rem;
}
}
@media(max-width:450px){
.cda-form .heading span{
font-size: 5rem;
text-align: center;
justify-content: center;
display: flex;
}
}