I am building a login form and I want the username and password fields square in the middle of the screen. I am also using the Zurb Foundation package to build this form. I am having a lot of trouble centering things vertically.
Here is my code:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
Registration
</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="stylesheets/main.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<nav class="top-bar">
<ul>
<li class="name"><h1>Title</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section>
<ul class="left">
<li>Link</li>
</ul>
<ul class="right">
<li>Link</li>
</ul>
</section>
</nav>
<body>
<div class="row" id="parent">
<div class="six columns" id="child">
<form id = "register">
<input type="text">
</form>
</div>
</div>
<script src="javascripts/jquery.foundation.topbar.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>
</html>
And some CSS that I've played around with, but haven't gotten to work yet:
body {
/*background-image: url('../images/gplaypattern.png');*/
background: red;
}
#register {
background-color: black;
width:80%;
}
#parent {
position: absolute;
left: 50%;
top: 50%;
height: 80px;
}
#child {
height: 75px;
position:absolute;
top: 50%;
background: green;
}
Wierdly, if I change the height of something to be dynamic (i.e. height: 30%;) it does not work, why?
UPDATE
This feature is being included as a component (xy-center) in an upcoming version of Foundation. More details on Github.
If you're using an older version of Foundation, using the CSS Tricks centering method will vertically and horizontally center the sign-in form with a minimal amount of CSS/HTML markup.
HTML
<div class="row" >
<div class="small-12 medium-6 columns" id="login">
<form >
<div class="row collapse">
<div class="small-12 medium-5 columns">
<input type="text" name="username" placeholder="Username" />
</div>
<div class="small-12 medium-5 columns">
<input type="password" name="password" placeholder="Password" />
</div>
<div class="small-12 medium-2 small-centered medium-uncentered columns">
Go
</div>
</div>
</form>
</div>
</div>
CSS
#login {
position: absolute;
left: 50%;
top: 50%;
/*
* Where the magic happens
* Centering method from CSS Tricks
* http://css-tricks.com/centering-percentage-widthheight-elements/
*/
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Result
The sign-in form will stay centered vertically and horizontally regardless of screensize. Here's a screenshot of the result.
And the working jsFiddle
Foundation doesn't handle vertical alignment well: https://github.com/zurb/foundation/issues/411.
You can approximate it with vertical padding, but there's no neat way around it for dynamic content.
The following jsFiddle (not created by me) shows how it should work using
div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}
http://jsfiddle.net/53ALd/6/ - but it won't in conjunction with the rest of the Foundation CSS.
The problem is that HTML/CSS doesn't really handle vertical centering well. Zurb's Foundation isn't going to help or hurt you in this respect.
See this very similar question Creating a vertically and horizontally centered html div
Related
My responsive site's initial zoom is incorrect on mobile:
Sample HTML is below (and in this live Codepen demo).
You can see that I'm already using <meta name="viewport" content="width=device-width, initial-scale=1">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.ctaGrabber{
word-wrap: break-word;
font-size: 30px;
font-weight: bold;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 0px;
padding-left: 30px !important;
padding-right: 30px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
</style>
</head>
<body class="">
<div class="container mainContainer hideWhenShowingForm">
<div class="row">
<div class="col-md-12 text-center">
<h1>“Here is a great title about a whole bunch of cool stuff”</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center presenters">
left col
</div>
<div class="col-md-6 text-left">
<div class="text-center">
<a href="#" class="btn btn-lg btn-primary ctaGrabber" data-hiddenForm="#hiddenCrmForm">
<span>YES! Watch The Training Now!</span>
<!-- <span class="elButtonSub" style="font-size: 14px; display: block;"></span>-->
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Why does my a.ctaGrabber button's font-size not cause the mobile "zoom" to be wider?
How can I either force the viewport zoom factor to honor this large font-size OR wrap the button text (without me specifying a button width)?
Ahhh, I figured it out:
I needed to add white-space: normal; to my .ctaGrabber style to override the white-space: nowrap; style of .btn in Bootstrap's buttons.less file.
Update:
The way to narrow down what element is causing the horizontal scroll bar is to use the Inspect panel and remove elements one at a time.
Then, once you’ve figured out the offending element, remove/edit one CSS property at a time.
In my case just recently, I found that an img was using the Bootstrap img-responsive class but also had max-width: 450px;, which overrode Bootstrap's max-width: 100%;. The solution (https://stackoverflow.com/a/50194061/470749) was to wrap the img in a div with this class:
.imgMaxWidthWrapper{
max-width: 450px;
margin: auto;
}
I am working on this Text and button over an Html5 Video, and I am trying not to use any media query to fix the mobile issue I am having. The problem is I am using the car-image-overlay class of bootstrap 4 to display the div that contains the text over the video. Using other bootstraps 4 classes to align centre left and all. But in Mobile (ex: iphone 5e) everything breaks, the button, h1 and p seem to not adjust so it covers the whole video an getting out of frame like this picture. I thought bootstrap would take care of this, but maybe i am not doing this the right way. I am using col-lg and xs as well, still no use
.cta-video-section .cta-video-container {
position: relative;
}
.cta-video-section .cta-video-container video {
height: auto;
vertical-align: middle;
width: 100%;
}
.cta-video-section .cta-video-container h2 {
color: white;
}
.cta-video-section .cta-video-container p {
color: white;
font-family: "Open Sans", sans-serif;
font-size: 1.1rem;
}
.cta-video-section .cta-video-container button {
white-space: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="cta-video-section">
<div class="cta-video-container">
<video id="cta-video" autoplay loop muted>
<source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4"> Your
browser does not support the video tag.
</video>
<div class="card-img-overlay d-flex align-items-center" id="cta-video-texts">
<div class="row">
<div class="text-left col-xs-1 col-lg-4 ">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="">
<button class="btn btn-danger btn-lg " id="cta-video-button">
Watch Video CTA
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Why don't you want to use a media query?
I think you can solve that if you will change the title the paragraph and the button text and size as well on the mobile version.
Reduce the Font size or line height of the content you had used in media queries. The Only problem is bigger font size for smaller devices
I am working on jQuery mobile on intel-xdk and trying to set navbar in footer with custom icons. I have tried so many codes and tried to change the icons. With jquery.mobile-1.4.1 i am unable to find and set custom properties for nav bar icons. Now i tried my code with different versions which are not the latest ones:
1)1.2.1 and 1.8.1 these are working and allowing custom nav bar icons. When i used latest jQuery which is 1.4.1 I find ui-icon attribute in css but I found that it is applying through 1.4.1.js. I am stuck with that and want to use jQuery also for the slider. For this I have to use jQuery1.4.1 but with that I am unable to get custom nav bar icons. Any solution?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--First try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<!--Second try with it(its working)-->
<!-- <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script> -->
<!--third try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For 1.4.x, custom icon background is assigned to the :after css selector:
.ui-icon-taifun:after {
background-image: url("taifun.png");
}
Then to use this icon in your buttons, data-icon should be set to "taifun" or whatever text you use after ui-icon-
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
Here is a DEMO
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.
Note: I'm using the skeleton grid system.
I am looking to extend the background color of one of my divs to the right, past the 960px container, but I am having no success. Any suggestions?
Current:
What I'm looking for:
HTML:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Your Page Title Here :)</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="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/responsive-nav.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<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">
<script src="js/responsive-nav.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.2</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
<div class="one-third column">
<h3>Three Core Principles</h3>
<p>Skeleton is built on three core principles:</p>
<ul class="square">
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
</ul>
</div>
<div class="one-third column" id="support">
<h3>Docs & Support</h3>
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi#getskeleton.com.</p>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
CSS:
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
#support{
color: #fff;
background-color: #000;
position: relative;
background-size: 100px;
}
One way of achieving this could be to add a new HTML element inside the #support and give it a 100% right padding and 100% negative right margin. Like this:
<div class="one-third column" id="support">
<div class="inner">
...
</div>
</div>
#support .inner {
padding-right: 100%;
margin-right: -100%;
background-color: #000;
}
Then add a 'page' container with overflow hidden to make sure you don't get a scrollbar.
<div id="page">
<div class="container">
...
</div>
</div>
#page {
overflow: hidden;
}
In the first step, the reason I added a new <div> rather than styling the existing #support is that I think it's best to leave <div>s that have grid structure styles alone. We don't want to affect their margins.
Here's a demo.