Hi i know this is an amateur question, but i have some trouble.
This is my CSS`:
body{
background-image: url(street-photography1.jpg);
background-size: cover;
color: white;
background-repeat: no-repeat;
background-position:center;
background-attachment: fixed;
}
form{
background-color: rgba(19, 18, 18, 0.66);
color: white;
padding: 40px;
margin-top: 200px;
padding-bottom: 60px;
}
.form-control{
background-color: rgba(14, 14, 14, 0.35);
border-radius: 0px;
color: white;
}
.logo1{
padding: 40px;
margin-top: 200px;
}
h1{
text-align: center;
}
.btn{
width: 100%;
margin-top: 20px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div class="container">
<div class="column">
<div class=" col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
</div>
<div class="row">
<div class="col-sm-offset-6 col-sm-7">
<form>
<h1>Hello, world!</h1>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Password
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<footer class="container">
<div class="row">
<p class="col-sm-5">
Copyright © 2016 , Singapore. All rights reserved.</p>
</div>
</footer>
</body>
</html>
So currently my webpage looks like this.
How can i shift my message logo so that the logo and my validation form are in the same line with each other?
You can next the two col divs inside of a row. i.e.
<div class="row">
<div class="col-sm-12>
<div class="row">
<div class="col-sm-6>...Logo...
<div class="col-sm-6>...Form...
</div>
</div>
</div>
</div>
Try adding col-sm-offset-6 to the logo container if you want to align them vertically.
<div class="col-sm-offset-6 col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
Or, if you want them aligned horizontally, the answer posted by #DPalmquist should do it.
Related
How it should look
How it is not suppose to look
So my goal is to try to make my Registration form look like my login form. All I did was added extra fields and then the form went crazy. Can anyone explain? I searched the internet for help but that didn't work and I was just really trying to make this one work because it looks nice. Yes I am working and learning dJango so I just wanted this to look nice even though it is not even needed. I go the extra mile sometimes but hate when I don't understand.
This is my index html and login form
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Welcome to My place</h1>
<h4>Sign into your account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Login</button>
</div>
</div>
<p>
Don't have an account yet?Register here
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
This is my registration form, it uses the same css and boostrap method
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
and this is my css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="https://images.unsplash.com/photo-1602900004353-2e786ce8f35c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=658&q=80"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<!-- I added below </div> tag here. only one change and it works. -->
</div>
<!-- Change Ended. -->
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
If i got your question this should help you.
You need to add crispy form tag on the top of the index page. To use crispy form tags, you need to install them first;
pip install django-crispy-forms
Then on the top of the index page (or any page where the form is present or use it in the base.html page);
{% load crispy_forms_tags %}
Create your forms in a different file named as forms.py where you can create your forms from python classes.
Import these forms into the views.py file and transfer them to html pages as variables.
In html pages;
<form action=some_url>
{{ form | crispy }} <!-- here the form is the variable whose value is set to be the class which created form in forms.py -->
</form>
I'm working on a responsive web app in Bootstrap 4 and use cards with images on one of the pages. Everything works fine through any window resizing on a desktop view; however, when I view them on mobile the card image height is completely off and about half the size of what it should be.
Here's the HTML:
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
The below CSS was added to ensure the cards all remain the same height, but this seems to cause the issue where the image is extremely small on mobile.
CSS:
#playerCardImage {
width: 100%;
height: 15vh;
object-fit: cover;
}
A codepen with the card example can be found here: https://codepen.io/franchise/pen/MWaoXOp.
Detail:
Cannot replicate sizing issue with Chrome Dev Tools mobile view, it only shows what I would expect the card to look like on mobile
To recreate the issue, view the Codepen on mobile to see the image is about half of the size compared to viewing the Codepen on a desktop
What am I missing here? Thanks in advance for the help.
Instead of creating a style based on id, can try to create the style based on class card-img-top.
.card-img-top {
width: 100%;
height: 150px;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/61617160/bootstrap-4-card-image-resizing-on-mobile#
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You should use height in percent
#playerCardImage {
width: 100%;
object-fit: cover;
}
#media all and (max-width:768px){
#playerCardImage {
width: 100%;
height: 110px;
object-fit: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
So the problem I am having is the webpage is not loading the background image
Following image address does not seem to load so page background stay's pitch black and nothing can be read because of it.
Edit:
Here is my full css code.
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415
background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg"); no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
}
this is what my index.html looks like.
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Coming soon</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://example.com/new/css/default.css">
<link rel="stylesheet" href="http://example.com/new/css/layout.css">
<link rel="stylesheet" href="http://example.com/new/css/media-queries.css">
<!-- Script
================================================== -->
<script src="http://example.com/new/js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="example.com/new/favicon.png" >
</head>
<body>
<div id="preloader">
<div id="status">
<img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt="">
</div>
</div>
<!-- Intro Section
================================================== -->
<section id="intro">
<header class="row">
<div id="logo" >
<a href="#" >
<img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">
</a>
</div>
<nav id="nav-wrap">
<a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li class="current">Home</li>
<li>About</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
</header> <!-- Header End -->
<div id="main" class="row">
<div class="twelve columns">
<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
</div>
<form action="http://cpanel.example.com/login.php" method="post" name="login" >
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label>
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label>
<input type="submit" name="Submit" class="button" value="Login" />
Lost your password?
</div>
</div> <!-- main end -->
</section> <!-- end intro section -->
<!-- About Section
================================================== -->
<section id="about">
<div class="row section-header">
<div class="twelve columns">
<div class="icon-wrap">
<i class="fa fa-group"></i>
</div>
</div>
</div> <!-- end section-header -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div id="call-to-action">
<div class="row section-ads">
<div class="twelve columns">
<div class="action">
</div>
</div>
</div> <!-- end section-ads -->
</div> <!-- end call-to-action -->
</section> <!-- About Section End-->
<!-- Location Section
================================================== -->
<section id="location">
<div class="contacts">
<div class="row contact-details">
<div class="columns">
</div>
<div class="columns">
</div>
<div class="columns end">
</div>
</div> <!-- end contact-details -->
</div> <!-- end contacts -->
</section> <!-- end location section -->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="copyright">
<li>© Copyright 2016 Coming soon</li>
</ul>
</div>
</div>
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script>
<script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://example.com/new/js/gmaps.js"></script>
<script src="http://example.com/new/js/waypoints.js"></script>
<script src="http://example.com/new/js/jquery.countdown.js"></script>
<script src="http://example.com/new/js/jquery.placeholder.js"></script>
<script src="http://example.com/new/js/backstretch.js"></script>
<script src="http://example.com/new/js/init.js"></script>
</body>
</html>
Change your css to this, because your css is invalid (when you define background-image you can't include the no-repeat. either use background: url() no-repeat; or add background-repeat: no-repeat;):
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center;
background-size: cover;
}
Also, not necessary to include the quotes in the url syntax. I prefer to leave it out. More information on this in this post: Is quoting the value of url() really necessary?
I can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:
I have been checking my code and I can't find it :(
Someone can help?
I'm cooding in just html and css, I know that
body{
background: black;
}
section.home{
margin-top: 0;
background: url(../img/bg-01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pull-left{
}
.ingresar-bg{
background-color: gray;
}
.ingresar{
margin: 50px 60px;
border: solid 1px white;
color: white;
background-color: rgba(0,0,0,0);
padding: 10px;
display: inline-block;
}
.ingresar:hover, .ingresar:active, .ingresar:visited{
background-color: gray;
color: white;
border: solid 1px white;
}
input.form-control{
margin-bottom: 15px;
}
.logo-modal{
margin-left: auto;
margin-right: auto;
}
.img-svg-logo{
margin: 35px 50px;
color: rgb(255, 255, 255);
width: 200px;
position: fixed;
}
#media (max-width:640px) {
.img-svg-logo{
width: 150px;
}
.ingresar{
font-size: 15px;
}
}
.cover-text {
text-align: center;
color: white;
vertical-align: middle;
font-size: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
.input-lg{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
}
input[placeholder].position{
text-align: center;
background-position: left center;
padding-left: 5px;
background-image: url(../img/ubicacion1.svg);
background-repeat: no-repeat;
}
.servicio-button{
background: #2260ad;
font-size: 25px;
border: solid 1px #2260ad;
border-radius: 0px;
width: 300px;
margin-bottom: 100px;
margin-top: 100px;
}
.servicio-button:hover{
background-color: #194984;
border: solid 1px #194984;
}
.modal-content {
position: relative;
background-color: gray;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.iconos{
color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div="container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left">
<a href="index.html">
<img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
</a>
</div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" />
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead">
Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
</div>
</div>
<!--
</section>
<section class="function">
<div class="cover-text" id="function">
<h1>¿Cómo funciona?</h1>
<p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
</div>
<div class="row iconos block-center" id="iconos">
<div class="col-md-4">
<img src="assets/img/ubicacion-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/servicios-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/agenda-img.png" class="img-responsive color" />
</div>
</div>
</section>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Try this code. Edited and alligned some code.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div "container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
</div>
</div>
</section>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Additional CSS
.row {
margin-right: auto;
margin-left: auto;
}
Actually it is the problem with bootstrap row class.
Check this code . It works
Working example http://www.bootply.com/coISbk1PgQ
I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.
.container = always leaves a wide padding on both sides of the page.
.container-fluid = leaves a small padding.
.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.
So putting this together
<div class="container-fluid">
<div class="row">This container will stretch from one side of the page to the order</div>
<div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>
</div>
I have a problem with Bootstrap in a landing page that I made...
I have the following 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">
<meta name="description" content="">
<meta name="author" content="">
<title>Landing page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Bootstrap Core CSS -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* CSS used here will be applied after bootstrap.css */
body {
background: url('assets/img/4777.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #851; /* This color is for you to see the android problem. */
}
.panel-default {
opacity: 0.95;
margin-top:50px;
}
.form-group.last {
margin-bottom:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
Which and when i load it on my browser it plays perfect however i make the window small etc.
But when i load it from my Samsung galaxy s5 mini
there is no responsivnes in the background.
It cuts the background in the middle and has white color on the next half of the page.
UPDATE 1
This problem is only detected in android smartphones with Chrome or Internet apps.
When someone tries it with iPhone it plays perfect!
This is the website
http://79.170.44.145/irem.co.vu/test-ptx/index.html
And the images from ANDROID are these.
iOS iPHONE
ANDROID CHROME BROWSER AND INTERNET ALSO
Any suggestions?
Please try this:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
I found an article it sounds like the same problem which you have. Check it out here.
If you want the background image to scale based on the size of the browser window:
background-image:url('assets/img/4777.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;