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
Related
I'm creating a view but my CSS is not displaying except if I put it inside a <style> I already tried using !important but didn't work too, also tried .container-fluid > .row > .d-flex > .out_profile
The class out_profile is not working the CSS inside that class is not displayed. To see the snippet you have to put it on small devices using the responsive
#media (min-width: 576px) {
.container-fluid{
display: none;
}
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I took out the display: none and it seems to do exactly what you'd expect -- the text is purple (see example below).
Having said that, I don't think
.container-fluid > .row > .d-flex > .out_profile
is a very elegant css selector. Perhaps you are new to css, but except in very limited circumstances would you need the > selector. In most cases, you would simple write:
.container-fluid .row .d-flex .out_profile
and you can probably even leave a few of the middle elements out, but depends on your situation.
And, as HereticMonkey has pointed out, a !important in css code rarely necessary, so it most likely isn't here either. I left it in below just to show that the only thing I changed was to remove the display: none.
#media (min-width: 576px) {
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
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;
}
The columns will automatically stack on top of each other when the screen is less than 768px wide. I want to, that than 991px wide but in bootstrap 4?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Just chang scrips to bootstrap-4:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Here is code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
Use media-query to 991px jsFiddle:https://jsfiddle.net/9p3nws1h/
#media only screen and (min-width: 991px) {
.col-sm-4{
width:33.333333%!important;
}
}
Please read the Bootstrap 4 Documentation. It shows that the lg breakpoint is 992 pixels ...
Therefore, the markup is simply:
<div class="row">
<div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
<div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
<div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
</div>
Working demo
Please refer Grid options section in bootstrap documentation for information on the breakpoints in grid.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
You are using col-sm-4 in your code and the breakpoint for sm is 540px.
Other options are
md at 720px
lg at 960px
xl at 1140px
If you want to define your own breakpoints then write your own media css queries.
In bootstrap 4, 991px resolution is not defined in media queries but then too if you want to add it, then you need to add it manually like this:
Bootstrap provides 992px resolution which comes in ".col-lg-"
#media only screen (min-width:991px) {
// Here comes your code
}
This isn't bootstrap, but it's a demonstration of how straightforwardly you can achieve your desired effect, using CSS3 Flexbox and a single #media query.
Working Example:
.row {
display: flex;
flex-wrap: wrap;
}
.row div {
flex: 1 1 33%;
height: 100px;
}
.row div:nth-of-type(1) {
background-color: lavender;
}
.row div:nth-of-type(2) {
background-color: lavenderblush;
}
.row div:nth-of-type(3) {
background-color: lavender;
}
#media only screen and (max-width: 991px) {
.row div {
flex: 0 0 100%;
}
}
<main>
<p>The columns will automatically stack on top of each other when the screen is less than 991px wide.</p>
<div class="row">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
</main>
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
I am trying to learn 960 grid system. My left body text appears on the right and vice versa for the other text. My intention is to have these two boxes on the same line. Left body text is appearing higher on the page than right body text too.
Any ideas? Confused!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Site name</title>
<link rel="stylesheet" type="text/css" href="./960.css" />
<link rel="stylesheet" type="text/css" href="./styles/main.css" />
</head>
<body>
<div id="skip">
Skip navigation
</div>
<div id="header" class="container_12">
<div id="mainLogo" class="grid_4">
<h1>Page name</h1>
</div>
<div id="testContainer" class="grid_8">
<div id="mainNavigation">
<ul>
<li>nav1</li>
<li>nav2</li>
</ul>
</div>
</div>
</div>
<div id="content" class="container_12">
<div id="contentleft" class="grid_8">
<p>Left body text</p>
</div>
<div id="contentright" class="grid_4">
<p>Right body text</p>
</div>
</div>
<div id="footer" class="container_12">
</div>
</body>
</html>
For me (in Chrome 8), the problem is caused by the margin on the H1. Specifically, Chrome's user agent stylesheet is inserting:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0px;
}
The extra height to this h1 causes the contentleft div to start directly underneath the testContainer div.
Setting a margin of 0 removes the problem for me in Chrome 8.
Note the instructions for setting up 960.gs mention the use of the reset.css stylesheet:
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
which should also remove this problem. It's generally good practice to include a reset stylesheet anyway, so if you're learning about the 960 grid system you should include this stylesheet.
After every Line please add the div with the clear class.
First would be just after you close the div tag for id= mainLogo. And 2nd one would after you close the div tag with id = testcontainer.
I have had the same issue. If you are using multiple containers on the same page you will also need to apply the clear_fix css class to to all but the first as the container class with try to position it's self at the top of the page.
<div id="content" class="container_12 clear_fix">
</div>
If you look at the source of any of the example sites on 960.gs they have done this where they use many containers.