I want to remove the empty space above the login page. I have no idea which place to come to this space. I add a login page in my mvc project and by default have empty space on the top of the page. I want to remove that empty space on top of the page.
See this reference:
checkLogin.cshtml
#{
ViewBag.Title = "checkLogin";
}
#using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
{
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-26">
kosmoanuaf
</span>
<span class="login100-form-title p-b-48">
<i class="zmdi zmdi-eye"></i>
</span>
<div class="wrap-input100 validate-input" data-validate="Valid email is: a#b.c">
<span class="btn-show-pass">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<input class="input100" type="text" name="username" required/>
<span class="focus-input100" data-placeholder="Email"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="password" required/>
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
}
_Layout.cshtml (master page)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="~/Content/Site.css" rel="stylesheet" type='text/css' />
#*login page*#
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/fonts/iconic/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/animate/animate.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/animsition/css/animsition.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/daterangepicker/daterangepicker.css" type="text/css" rel="stylesheet" />
<link href="~/vendor/select2/select2.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/util.css" rel="stylesheet" type="text/css" />
<link href="~/Content/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.metisMenu.js"></script>
<script src="~/Scripts/custom.js"></script>
#RenderBody()
#*login page*#
<div id="dropDownSelect1"></div>
<script src="~/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="~/vendor/animsition/js/animsition.min.js"></script>
<script src="~/vendor/bootstrap/js/popper.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/vendor/select2/select2.min.js"></script>
<script src="~/vendor/daterangepicker/moment.min.js"></script>
<script src="~/vendor/daterangepicker/daterangepicker.js"></script>
<script src="~/vendor/countdowntime/countdowntime.js"></script>
<script src="~/Scripts/main.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
site.css
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
How to remove the empty space top of the page? Which place do I need to do correction?
I think here is the issue that I can see in css of body.
try it:
body {
padding-top: 0;
padding-bottom: 20px;
}
set padding-top to 0 for body or simply remove it.
Related
I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.
/*STAFF LOGIN*/
#myMainContainer {
border: 10px solid red;
}
#logoStaffLoginPage {
width: 50%;
height: auto;
}
<!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">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title></title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<!--Google recaptcha-->
<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>
<!--Google analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-20BMMNWM05');
</script>
</head>
<body>
<div class="container" id="myMainContainer">
<div class="row">
<div class="col">
<img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
</div>
</div>
<div class="row">
<div class="col bodyTextBold centerText">
Staff Login
</div>
</div>
</div>
<div class="container">
<form method="post" action="/accounts/login/">
<input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
<label for="id_username">Username:</label>
<br>
<input class="form-control" type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
<br><br>
<label for="id_password">Password:</label>
<br>
<input class="form-control" type="password" name="password" autocomplete="current-password" required id="id_password">
<br>
<br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.
Below is a screen dump of the page, and I want to down scale the logo image.
There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.
Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it.
Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use%20the%20object%2Dfit%20Property%20to%20Resize%20the%20Image%20in%20CSS,-We%20can%20use&text=We%20can%20specify%20the%20way,given%20dimension%20of%20the%20container.
parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}
I figured it out. I was edit the wrong css file.
I have the following code on my web page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="Styles/new.css" />
<style>
.navbar-brand {
display: flex;
white-space: normal;
}
</style>
</head>
<body style="background-color:cadetblue">
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>
<nav class="navbar" style="background-color: #264653; margin:0px auto; max-width:900px; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex; white-space: normal;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e4b16d">City of Testing</span><br />This is the company name</span>
</span>
</div>
</nav>
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content">
<div style="margin-top: 0px">
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<div style="align-items:center; justify-content:left;display:flex;font-size:24px"><b>Recording test testing</b></div>
<div> </div>
<div>
<span style="font-size:18px"> This is a test1. This is a test2.This is a test3.This is a test4.This is a test5.This is a test6.This is a test7.This is a test8.This is a test9.This is a test10.This is a test11This is a test12This is a test13This is a test14This is a test15This is a test16This is a test17This is a test18This is a test19This is a test20This is a test21This is a test22This is a test23This is a test24.</span>
</div>
<div> </div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I want the navbar to be totally flushed to the top of the browser window. I see a space between the browser window and the navbar. below is the screenshot. I want to get rid of the space where the red arrow is. while attempting to flush the navbar at the top, I want the page to be responsive too.
I want something like this:
#media (min-width: 992px) {
.container.max-width-940 {
max-width: 1390px !important;
}
}
#media (min-width: 1200px) {
.container.max-width-940 {
max-width: 1390px !important;
}
}
.container.max-width-940 {
min-width: 1390px !important;
}
Your navbar-brand class has the white-space property set to nowrap, which prevents the text wrapping if the container becomes smaller than the text inside it.
If you change it to normal the text will break, and allow the container to become smaller.
Additionally, your navbar is absolutely positioned, which is taking it out of the document flow. If you centre it with margin:0px auto and remove the absolute positioning, your content below it will be automatically pushed down if its height changes.
.navbar-brand {
display: flex;
white-space: normal;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
-->
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--
<link rel="stylesheet" href="Styles/new.css" />
-->
</head>
<body style="background-color:cadetblue">
<form id="form1" runat="server">
<asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>
<nav class="navbar" style="background-color: #264653; margin:0px auto; max-width:900px; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex; white-space: normal;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e4b16d">City of Testing</span><br />This is the company name</span>
</span>
</div>
</nav>
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%" class="container max-width-940 body-content">
<div style="margin-top: 0px">
<asp:UpdatePanel ID="updatePanel2" runat="server">
<ContentTemplate>
<div style="align-items:center; justify-content:left;display:flex;font-size:24px"><b>Recording test testing</b></div>
<div> </div>
<div>
<span style="font-size:18px"> This is a test1. This is a test2.This is a test3.This is a test4.This is a test5.This is a test6.This is a test7.This is a test8.This is a test9.This is a test10.This is a test11This is a test12This is a test13This is a test14This is a test15This is a test16This is a test17This is a test18This is a test19This is a test20This is a test21This is a test22This is a test23This is a test24.</span>
</div>
<div> </div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Try doing some "#media" rule, wherein if the page has reach a certain size, it will be reorganize base on the conditions that you have set in classes or id. Check this link.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Use overflow-wrap: break-word; css property on the container
If I open it through a pc browser it will be responsive but when I change it to a tablet or smartphone view it does not become responsive, instead it becomes zoom (should zoom in if view). how to solve it?
Here its my code :
.modal-dialog{
padding-top: 100px;
border-radius:0;
}
.modal-header{
background-color: #F47321;
}
.modal-title{
color: white;
}
.modal-footer{
background-color: #FFFFFF;
margin-top: 0;
}
.modal-body{
background-color: #FFFFFF;
color: black;
}
.orange{
background-color: #F47321;
}
.grey{
background-color: #807874;
}
.title-header{
background-color: #F47321;
}
.body {
background-color: #807874;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family:'Elivio',sans-serif;
font-size:100px;
div{
font-family:Elivio;
}
</style>
<title>Selamat Datang</title>
<body class="body">
<div class="content">
<div class="container">
<br>
<div class="modal-header">
<h4 class="modal-title" style="text-align: left; font-family: MavenPro-Bold"> SYARAT & KETENTUAN</h4>
</div>
<div class="modal-body">
<p style="font-family:MavenPro-Regular;"><strong></strong><strong>SYARAT DAN KETENTUAN</strong></p>
<p> </p>
</div>
<div class="modal-footer">
<div align="left">
<label class="checkbox-inline">
<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox" style="font-family:MavenPro-Regular;" />Saya setuju dengan syarat & ketentuan
</label>
<br>
<p ><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
</div>
<form method="POST" action="pengajuan" align="">
<input type="submit" name="btncheck" class="btn btn-success" id="btncheck" value="Lanjutkan" />
</form>
</div>
<p align="center"><font color="white">© Rumah Zakat 2018</font></p>
</html>
let me know if there is a wrong code, because men are always wrong whoops ...
You need to add the viewport <meta> tag to your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
...Note that you'll also need to add the <head> section itself (you appear to have omitted it):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
<link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
<style>
#font-face {
font-family: 'Elivio', sans-serif;
font-size: 100px;
div {
font-family: Elivio;
}
</style>
<title>Selamat Datang</title>
</head>
<body class="body"> ... </body>
</html>
I cannot scroll the page even if the content inside require to scroll it. The page is cut. http://medica.mastertools.net/. You can login (fake form just submit).
No overflow:hidden in the css.
Is maybe due to the viewport that is not set?
Below the html code of the main page, I have used Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"
/>
<title><?=SITETITLE?></title>
<meta name="keywords" content="Medica" />
<meta name="description" content="Medica Webshop" />
<link rel="stylesheet" type="text/css" media="print" href="<?
=HTTPPATH?>css/print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?>css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?
>css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?
=HTTPPATH?>css/styleNew.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script type="text/javascript" language="JavaScript" src="<?=HTTPPATH?
>js/library.js"></script>
<script type="text/javascript" language="JavaScript" src="<?=HTTPPATH?
>js/validation.js"></script>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<body>
<?php $this->view('new/header'); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6 align-self-center">
<?=$main_content?>
</div>
<div class="col-sm-3">
<?=$right?>
</div>
</div>
</div>
<div id ="bottom" class="fixed-bottom"> <?=$footer?> </div>
</body>
</html>
Your body tag does have overflow:hidden set, on line 21 of screen.css. Change that to overflow:auto and you should be all set.
How do I get rid of padding in Bootstrap 3's columns?
In the following plunkr, I'd like for the button and text input to be touching: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview and for each to fill the entire width of the div. I'd like them to have no left or right padding. Same for the "pull me left" and "me too" divs.
When I override the padding-left in my own CSS, it pulls everything to the left, making the "Jim" and "Hello" div's content off screen.
Any ideas?
You can achieve this by adding a class to the row which removes padding from all immediate div elements with a class name beginning with "col-".
See here: http://plnkr.co/edit/MBkojy?p=preview
Here's the entire code what you wanted :) Please give a try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
Just a div
<div class="row">
<div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">Jim</div>
<div class="col-xs-6">Hello</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6" style="padding-right:0px !important; padding-left:0px !important">
<button class="btn" class="col-xs-12" style="width:100%; float:right; background-color:green; ">Click</button>
</div>
<div class="col-xs-6" style=" padding-left:0px !important; padding-right:0px !important">
<input type="text" class="col-xs-12" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">pull me left</div>
<div class="col-xs-6">me too</div>
</div>
</div>
</div>
</div>
I have done it for the button and text input :) you can proceed in the same way :)
You can set all divs to no padding:
div {
padding-left: 0px !important;
padding-right: 0px !important;
}
For the other two divs, you'll need to give them some named class (in my example 'padLeft') that return the left padding to the divs.
div.padLeft {
padding-left: 15px;
}
That is the minimally invasive way to do it. If you have more div's where you want padding than not you simply inverse this, using a separate class for divs that you want the padding removed and leave the others to their default.