Jump to content

Jaytech

Members
  • Posts

    7
  • Joined

  • Last visited

Jaytech's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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%; } }
  2. 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">&#9660; </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"> &rang;</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">&#9660; </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">&#9660; </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; } }
  3. 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?
  4. 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
  5. Thanks alot guys, my problem has been solved.
  6. 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
  7. 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; } }
×
×
  • Create New...