Jaytech
-
Content Count
7 -
Joined
-
Last visited
-
I am creating a web page layout using bootstrap and the backend is PHP Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out to debug the CSS code to make the two sections visible in mobile,,,please assist? HTML <!DOCTYPE html> <html lang="en-us"> <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, minimum-scale=0.5, maximum-scale=3.0"> <meta name="HandheldFriendly" content="true"> <link rel="icon" type="image/x-icon" href="img/favicon.ico"> > <link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"><link href="{{ asset('css/bootstrap/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"> <!-- google font --> <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet'> </head> <body> <!-- Service Section --> <div class="content-block" id="service"> <br><br> <header class="block-heading cleafix text-center"> <h1> Services</h1> <!-- <p>Lorem Ipsum Text</p> --> </header> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-center"> <h3 class="section-subheading text-muted"> Welcome </h3> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School Of Arts</h4> <p>...............</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">School of Business </h4> <p> ........... </p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-code fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Engineering </h4> <p> ........ </p> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-wordpress fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Human Resource</h4> <p> ........ </p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Medicine </h4> <p> ........ .......</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Biological Sciences </h4> <p> .......... </p> </div> </div> </div> </div> <!-- END SERVICE SECTION--> <!-- Contact Form Section--> <div class="content-block" id="contact"> <div class="overlay-3"> <header class="block-heading cleafix text-center"> <h1>Contact</h1> <!-- <p>Feel Free to Contact</p> --> </header> <div class="block-content text-center"> <div class="container-fluid"> <div class="row"> <!-- Form Section --> <div class="col-sm-4 wow animated fadeInLeft"> {!! Form::open(array('route' => 'index.post', 'method' => 'POST','class' => 'contact-form')) !!} {{ Form::text('name', null, array( 'placeholder' => 'Name...', 'class' => 'input', 'required' => ''))}} {{ Form::email('email', null, array('placeholder' => 'Email Address...','class' => 'input', 'required' => ''))}} {{ Form::textarea('message', null, array('placeholder' => 'Message...', 'class' => '', 'required' => 'input')) }} {{ Form::submit('Submit') }} {!! Form::close() !!} </div> <!-- Adress --> <div class="col-sm-4 wow animated fadeInRight"> <div class="row"> <div class="col-sm-12"> <div class="contact-info"> <div class="clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-map-marker"></i> </div> <p><strong> 3069 Nkr</strong> </p> </div> <div class="tel clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-mobile"></i> </div> <p> <strong> <a class="tell" href="tel:+256123456" rel="nofollow"> +256 123456 </a> </strong> <br> <strong> <a class="tell" href="tel:+256547890" rel="nofollow"> +254 756789098</a> </strong> </p> </div> <div class="clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-envelope-o"></i> </div> <p> <strong> info@tcol.com </strong> </p> </div> </div> </div> </div> <div class="row"> <ul class="social-box"> <li><a class="facebook-icon" href="https://www.facebook.com/pwebkenya" target="_blank"> <i class="fa fa-facebook"></i></a></li> <li><a class="twitter-icon" href="https://twitter.com/pwebkenya" target="_blank"> <i class="fa fa-twitter"></i></a></li> <li><a class="g-plus-icon" href="https://github.com/patwan"><i class="fa fa-github"></i></a></li> <li> <a class="linkedin-icon" href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> <!-- photo --> <div class="col-sm-4"> <br> <br> <div class="team-member"> <img src="img/7.jpg" class="img-responsive img-circle" alt=""> <h4> Steve Johns</h4> <p class="text-muted"> Web Developer/Graphics Designer</p> </div> </div> <!-- END PHOTO--> </div> </div> </div> <!-- block-content --> </div> <!-- overlay-3 --> </div> <!-- content-block --> </body> </html> CSS code @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/pacifico.woff") format('woff'); } html, body { margin: 0; padding: 0; } img, object, embed, video{ max-width:100%; height:auto; } /*Service section*/ .service-heading{ font-size: 22px; } #service { background: url(../img/bg/number1.gif) repeat center center fixed; color: #ffffff; display: block; } #service h3, p{ color: #ffffff; } #service .block-heading h1 { color: #fff; font-family: 'Milonga', cursive; font-weight: 400; font-size: 55px; word-spacing: 5px; } /*Contact section*/ #contact { background: url(../img/bg/contact-bg.jpg) no-repeat center center fixed; background-size: cover; color: #fff; } #contact .block-heading h1 { color: #fff; font-family: 'Milonga', cursive; font-weight: 400; font-size: 55px; } .overlay-3 { padding: 60px 0; /* background-color: rgba(9, 20, 39, 0.83); */ /* background-color: rgba(24, 77, 77, 0.93); */ background-color: rgba(33, 103, 88, 0.9); } .contact-info { padding: 16px 62px; text-align: left; font-size: 18px; line-height: 36px; margin-top: 25px; } . .contact-info i { width: 40px; height: 40px; color: white; padding-top: 7px; font-size: 25px; border: 1px solid #fff; text-align: center; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } .contact-info p { padding: 27px 10px; } .contact-info span { padding-left: 20px; } input[type="text"], input[type="email"], textarea { display: block; margin: 0 auto; width: 100%; background: transparent; border: 1px solid #fff; padding: 12px 15px; margin-bottom: 30px; } input[type="submit"] { background: transparent; border: 1px solid #fff; width: 100%; padding: 10px; transition: 0.5s background linear; font-weight: bold; } input[type="submit"]:hover { background: #fff; border-color: #fff; transition: 0.5s background linear; color: #333; } ::-webkit-input-placeholder { color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } :-ms-input-placeholder { color: #fff; } @media only screen and (min-width: 321px) and (max-width: 480px){ #service{ display: inline-block; height: 100%; width: 100%; padding-bottom: 20px; background: blue; } .overlay-3{ background:none; padding: 0; } #contact{ display: inline-block; height: 100%; width: 100%; } }
-
I have a responsive drop-down navigation bar that is responsive to screens of all width. The navigation bar has a hidden menu icon that displays when the screen width is below 480 px. When the button is clicked the drop-down lists appear. The problem is that am not able to make the navigation scale to the full-width of the mobile screen and also the drop-down lists appear as a block in tandem to the navigation bar. index.html <!DOCTYPE html> <html> <head> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <!-- Clicking on the label will check the checkbox because for and id of checkbox are the same--> <label for="show-menu" class="show-menu"> Menu </label> <input type="checkbox" id="show-menu"> <div class="navbar"> <div class="menu"> <ul class ="list"> <li class="active"> Home </li> <li> <a href="humanities.html"> Humanities <span class="arrow">▼ </span> </a> <ul> <li> <a href="#" rel="nofollow"> Music </a></li> <li> <a href="#" rel="nofollow"> Linguistics </a></li> <li> <a href="#" rel="nofollow"> Penology </a></li> <li> <a href="#" rel="nofollow"> Anthropology </a></li> <li> <a href="#" rel="nofollow"> Sociology <span class="arrow"> ⟩</span></a> <ul> <li><a href="#" rel="nofollow"> Psychology</a></li> <li><a href="#" rel="nofollow"> Counselling </a></li> <li><a href="#" rel="nofollow"> C.M.D </a></li> </ul> </li> </ul> </li> <li> <a href="education.html"> Education <span class="arrow">▼ </span> </a> <ul> <li> <a href="#" rel="nofollow"> E.C.D.E </a></li> <li> <a href="#" rel="nofollow"> Science </a></li> <li> <a href="#" rel="nofollow"> Arts with Edu </a> <ul> <li><a href="#" rel="nofollow"> Swahili </a></li> <li><a href="#" rel="nofollow"> Psychology </a></li> <li><a href="#" rel="nofollow"> Sociology of Ed. </a></li> <li><a href="#" rel="nofollow"> Liberal Ed. </a></li> </ul> </li> </ul> </li> <li> <a href="eng.html"> Engineering <span class="arrow">▼ </span> </a> <ul> <li> <a href="#" rel="nofollow"> Electrical </a></li> <li> <a href="#" rel="nofollow"> Civil & Structural </a></li> <li> <a href="#" rel="nofollow"> Aeronautical </a></li> <li> <a href="#" rel="nofollow"> Chemical </a></li> <li> <a href="#"rel="nofollow" > Mechanical </a> <ul> <li><a href="#" rel="nofollow"> Industrial </a></li> <li><a href="#" rel="nofollow"> Automotive </a></li> </ul> </li> </ul> </li> <li> <a href="contact.php" rel="nofollow"> Contact Us</a></li> </ul> </div> </div> </body> </html> style.css /*Styles the background-color of an active link*/ .menu ul .active{ color: #ffffff; background: #red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red 20%, green); /* Standard syntax */ background: linear-gradient(red 20%, green); /* Standard syntax */ } .navbar{ width:100%; max-width:1000px; text-align:center; margin-top:-8px; margin-bottom:60px; margin-left:160px; } .menu ul{ /*Removes bullets*/ list-style:none; } /*Styles each list within ul*/ .menu ul li{ background-color:green; border:1px solid #ffffff; width:100%; max-width:173px; height:35px; line-height:35px; margin:auto; text-align:center; /*Makes the list dispaly in a horizontal maneer*/ float:left; position: relative; border-radius:8px; font: 15px; font-weight:regular; } .menu ul li a{ text-decoration:none; color:white; display:block; } .menu ul li a:hover{ background-color:red; border-radius:8px; } .menu ul ul{ position:absolute; margin-left:-40px; display:none; } .menu ul li:hover >ul{ display:block; } .menu ul ul ul{ width:100%; margin-left:134px; top:0px; } /*Display the drop-down on hover*/ /*+ selecctor styles every element that are placed immediately after another element */ .menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{ display:block; } /*Hide Checkbox*/ input[type=checkbox]{ display:none; } /*Show menu when invisible checkbox is checked*/ /*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/ /*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/ input[type=checkbox]:checked ~ .list{ display:block; } /*Styles the menu-label according to its class*/ .show-menu{ font-family:"Helvetica Neue", Helvetica, Arial,sans-serif; text-decoration:none; color:#fff; background: #19c589; text-align:center; padding:10px 0; display:none; } /*Responsive styles*/ @media screen and (max-width:480px){ /*Make drop-down links appear inline*/ .menu ul{ position:static; display: none; } .navbar{ margin-top:-15px; margin-left:5px; } #show-menu:checked ~ .navbar .menu ul { display: block; } /*Create vertical spacing*/ .menu ul li{ margin-bottom:1px; } /*Make all menu links full width*/ .menu ul li, .menu li a{ width:100%; } .show-menu{ display:block; } body{ background-image:none; } }
-
Hello dsonesuk, thanks for the help, I 've read the article and tried to implement some of the suggestions on that site but the problem persists. Do you have any other idea that could be helpful?
-
Hello all, I have a website hosted on Hostgator servers. I have also added it to a CDN(Cloudflare). When I fill the contact form and submit I get Error 524(An error occured). How can I fix that pwebk.com _ 524_ A timeout occurred.html ..Please assist
-
Thanks alot guys, my problem has been solved.
-
Hey all, I have got a PHP contact form which is working fine in localhost, but when I upload it to a live server(hostgator),I get the following single-line error when l load the form, Please assist PHP CODE <?php session_start(); //INITIALIZE VARIABLES and set to empty values $name = $phone = $email = $message= $captchaResults= ""; $nameErr = $phoneErr = $emailErr = $checkboxErr= $messageErr= $captchaErr= ""; ini_set('display_errors', 1); error_reporting(E_ALL); if ($_SERVER["REQUEST_METHOD"] == "POST") { $valid = true; //check if name is empty and performs functions in curly brackets if (empty($_POST["name"])) { $valid = false; $nameErr = "Please fill out this field"; } else { //Passes name throught test input function at the bottom of page $name = test_input($_POST["name"]); //remove illegal characters from name , Sanitize data $nm =filter_var($name, FILTER_SANITIZE_STRING); // Validate Data if (!preg_match("/^[a-zA-Z\s,.-]{3,30}$/", $nm)) // Regexp requiring letters, spaces, commas and fullstops and should not exceed 30 letters { $valid = false; $nameErr = "Please don't insert numbers*"; } } //check if phone contains numbers if (empty($_POST["phone"])) { $valid = false; $phoneErr = "Please fill out this field"; } else { $phone = test_input($_POST["phone"]); if (!preg_match("/^[0-9\s(),+.-]*$/", $phone)) { $valid = false; $phoneErr = "Please don't insert letters*"; } } //check if email is valid if (empty($_POST["email"])) { $valid = false; $emailErr = "Please fill out this field"; echo'email is empty<br>'; } else { $email = test_input($_POST["email"]); //Remove all illegal characters from email $em = filter_var($email, FILTER_SANITIZE_EMAIL); if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $em)) { $valid = false; $emailErr = "*Please insert a valid email address*"; } } // Check the values from checkbox and POST them to email $value= ""; // if (empty($_POST["checkbox"])) { $valid = false; $checkboxErr = "Please fill out this field*"; } else{ $checkbox =$_POST["checkbox"]; //Array of values from the checkbox values $value= implode(' , ', $checkbox); //implode values and separate by a comma $value = test_input($value); } //check if message contains letters and white-space if (empty($_POST["message"])) { $valid = false; $messageErr = "Please fill out this field"; echo 'Message is empty<br>'; } else { $message = test_input($_POST["message"]); //remove illegal characters from url $msg =filter_var($message, FILTER_SANITIZE_STRING); if (!preg_match("/^[a-zA-Z\s-,:;`~.?()]*$/", $msg)) //Regexp requiring spaces, full-stops, colon, semi-colons brackets, question marks { $valid = false; $messageErr = "Only letters and spaces are allowed*"; } } //Captcha Results $getRandomNumber1 = $_POST["firstRandomNumber"]; $getRandomNumber2 = $_POST["secondRandomNumber"]; $getCaptchaResults = $_POST["captchaResults"]; $totalNumber= $getRandomNumber1 + $getRandomNumber2; if($totalNumber == $getCaptchaResults){ echo''; } else{$valid = false; $captchaErr="Wrong Answer";} //stores name in a session variable to be used in thank-you page $_SESSION["nm"]= $nm; require ("PHPMailer/PHPMailerAutoload.php"); //including phpmailer class $mail = new PHPMailer(); $mail->IsSMTP(); // set mailer to use SMTP $mail->SMTPDebug = 2; $mail->Host = "smtp.gmail.com"; // specify main and backup server or I.P ADDRESS from server $mail->SMTPSecure = "tls"; // Connect using a TLS connection $mail->Port = 587; //Gmail SMTP port $mail->SMTPAuth = true; // turn on SMTP authorization $mail->Username = "************@gmail.com"; // SMTP username $mail->Password = "**********"; // SMTP password $mail->From = "$em"; //email of sender $mail->FromName = "$nm"; //name of the sender $mail->AddAddress("**************@gmail.com", "Patwan"); //email address of recepient and name $mail->AddReplyTo($em, $nm); //Address to which recepient will reply $mail->WordWrap = 100; // set word wrap to 100 characters $mail->IsHTML(true); // set email format to HTML $mail->Subject = "Contact Form"; //subject of email $mail->Body = "Name: " . $nm . "<br>Phone: " . $phone . "<br>Email: " . $em . "<br>Subject: " . $value . "<br>Message: " . $msg ; //$mailphp = false; if ($valid) { // if (!$mailphp) { if (!$mail->Send()) { echo 'Form could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; exit; } else { header('Location:thank_you2.php'); } } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> Error Warning: session_start(): Cannot send session cookie - headers already sent by ( output started at /home4/pwebk/public_html/contact.php:1) in /home4/pwebk/public_html/contact.php on line 4
-
Hey all, I have got a jquery slideshow on my website which am trying to make the images in it responsive so that they can fit on tablets and mobile device screens, but it doesn`t work as expected. Kindly assist? HTML <div id= "hero"> <div id= "pager"> </div> <div id= "pause"> ≈ </div> <div id= "play"> Δ</div> <div id= "next"> 〉 </div> <div id= "prev"> 〈 </div> <div id= "slider"> <div class= "items"> <img src= "images/hp.jpg" alt="HP Computers" id="img"> <div class = "info"> <h2> HP Computers </h2> <p> We deliver all type of HP laptops <a href= "laptops.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/mobile.jpg" alt="Mobile Phones"> <div class = "info"> <h2> Mobile Phones</h2> <p> We create all kinds of mobile websites <a href= "mobile.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/photography.jpg" alt="Photography Portfolio Designs"> <div class = "info"> <h2> Photography Brochures </h2> <p> We create unique, responsive and amazing photography portfolio <a href= "photography.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/graphic_design.jpg" alt= "Graphics Design"> <div class = "info"> <h2> Graphics Designs </h2> <p> We create amazing graphic contents for your project or institution <a href= "graphic_design.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> </div> <!--End_slider--> </div> <!--End_hero--> <script type="text/javascript" src= "jquery-1.12.3.js"> </script> <script type="text/javascript" src= "jquery.cycle.all.js"> </script> <script type="text/javascript" src= "test.js"> </script> CSS /*Screen size of laptop and Desktop monitors.*/ @media screen and (min-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 550px; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 550px; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 550px; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 15px; } .info p { font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 15px; line-height: 1px; } } /* Screen size of a tablet and below.*/ @media screen and (max-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 98%; background-size: auto; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 98%; background-size: auto; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 98%; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 8px; } .info p { width: 98%; font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 8px; line-height: 1px; } } /*Screen size of a phone in potrait and landscape mode.*/ @media screen and (max-width: 480px){ #hero{ width: 98%; border: 2px solid brown; box-shadow: 3px 3px 3px; display: block; position: relative; margin: auto; } #slider{ width: 98%; display: block; position: absolute; overflow: hidden; } .info { width: 98%; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 5px; } .info p{ opacity: 0; } }