I have used Bootstrap 3 to create a page with a fixed nav bar top. In the body I have elements with #anchor tags. When I click from the nav bar, the element position is displayed but there seems to be a misalignment of the row (approximately the height of the nav bar) - BS3.0 docs say you need to put the padding-top of the body to the height of the nav bar (50px in this case) and have the body position relative. There have been posts about the docs not being correct and I can't seem to fix this...
here is a fiddle: http://jsfiddle.net/richnasser/fkLh9sf4/1/ and the full screen http://jsfiddle.net/richnasser/fkLh9sf4/1/embedded/result/
Click on 'about' and the scrolling should stop at the top of the Santa Claus header. In my browser (Chrome) it goes well beyond that, hiding the headline. Any insights would be greatly appreciated.
<!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>North Pole Industries</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNavBar">
<div class="container-fluid">
<div class="navbar-header">
<button class ="navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse">
<span class = "glyphicon glyphicon-list-alt"></span>
</button>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li class="active">home</li>
<li>capabilities</li>
<li>client list</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class = "row" id="home">
<div><img src= "http://placekitten.com/1200/600" class="img-responsive" alt="kitty"></div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive" alt="grey"></div>
</div>
<div class = "row">
<div class="col-md-3" id="about"><h3>Santa Claus <small>chief</h3></small><p class="text-justify">Santa brings over fifteen years of experience in the auto industry through a combination of roles in marketing, field work and wind tunnel studies. His success is derived from innovative thinking and a keen ability to solve complicated problems. Santa has worked in both US and International markets doing both strategic and tactical marketing.</p>
Read More</div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="santa"></div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="rudolf"></div>
<div class="col-md-3"><h3>Rudolf <small>dog</h3></small><p class="text-justify">Rudolf counts on over fifteen years experience delivering leadership and marketing capabilities to auto and technology companies, creating profitable and sustainable business growth. He built his reputation on a solid commitment to customers, passion for marketing excellence, and a strong climate of teamwork.</p>
Read More</div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive"></div>
</div>
</div>
and the css
body {
position: relative;
padding: 50px;
}
You can achieve this using simple JavaScript. Below Fiddle will help you to figure it out.
http://jsfiddle.net/ianclark001/aShQL/
In the above fiddle code, update the fromTop height as per your fixed header height.
var fromTop = 50; // Give Your fixed header height
And also you can find more information at:
offsetting an html anchor to adjust for fixed header
I have used this solution, with no javascript, only css, and worked for me:
Give your anchor a class:
<a class="anchor" id="top"></a>
You can then position the anchor an offset higher or lower than where
it actually appears on the page, by making it a block element and
relatively positioning it. -250px will position the anchor up 250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
You can adjust the top to the size of you navbar.
Related
My media tags dont seem 2 work even thought i have the viewport tag in my head. I am trying to change the font size when lowering the resolution. I am not sure what i am doing wrong but would love some help.
<? ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Changa One' rel='stylesheet'>
<script src="main.js"></script>
</head>
<body style="background-color: #bdc3c7">
<div class="navBar">
</div>
<div class="container">
<div class="pLbl" style="font-family: 'Changa One';">
Enter Password to enter:
</div>
<div>
<input class="pInput" id="pInp" type="password"></input>
</div>
<div>
<div class="tooltip">
<button class="pBtn" onclick="pLogin()"></button>
<span class="tooltiptext">Submit</span>
</div>
</div>
</div>
</body>
</html>
<style>
.pLbl {
font-size: 24px;
color: rgb(50,50,50);
}
#media screen and (max-width: 640px)
{
.pLbl {
font-size 12px;
}
}
</style>
It's just because you forgot the colon after font size on media query :)
PS: While modern browsers have a code correction for invalid HTML, I suggest you put style tag in your head, declare the doctype and write your inputs with self-close tag.
Here's my layout sample on bootply
Does this require a CSS 'hack' or did I get my markup wrong to begin with?
(or, is this the default intended Twitter bootstrap design)?
Just put the jumbotron in a row div:
<div class="row">
<div class="jumbotron">
.....
.....
</div>
</div>
OR use css to increase the width and adjust the position like:
<div class="jumbotron" style="width:102%; margin-left:-1%">
....
....
</div>
(not recommended)
This is what a default Jumbotron looks like. I'm not sure why you didn't just check the Bootstrap documentation to see their basic example?
Edit: The reason why your Jumbotron isn't the same width is because your table is wrapped in a .row class which has margin-left: -15px & margin-right: -15px applied to it.
To fix your issue, wrap your .jumbotron in a <div class="row"></div>
You should always place your elements within a column though. e.g. .row > .col-sm-12 > .jumbotron
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a lead</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.
I have this code
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-1 nopadding">
<div id="player">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-2 nopadding">
<div id="chat">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
</div>
</div>
</div>
<div class="col-md-offset-1"></div>
</div>
CSS:
.nopadding {
padding: 0 !important; }
I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.
The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?
You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.
Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo
Html:
<div class="container-fluid">
<div class="row player-section">
<div class="col-sm-6 no-padding">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
</div>
</div>
<div class="chat-wrapper">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
</div>
</div>
</div>
Css:
.no-padding{
padding:0;
}
iframe{
border:none;
}
.player-section{
position:relative;
}
.chat-wrapper{
position:absolute;
left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
width:100%;
height:100%;
}
#media screen and (max-width:767px){
.chat-wrapper{position:relative;height:300px;left:0;}
}
Another option is to create you own custom aspect ratios, as described in this blog.
If for example you want to show a pdf (A4 size) in your webpage, you can add the following to your style sheet:
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
Now you can add your custom stylesheet to your iframe:
<div class="embed-responsive embed-responsive-210by297">
<iframe src="..."></iframe>
</div>
By customising the aspect ratio of the different iframes, you can align the heights of all iframes to match mutually. Another advantage is that you follow the bootstrap philosophy.
I am using Zurb 5.5.3 with Modernizr v2.8.3. - I am using CSS and do NOT wish to use SASS.
Below are two Browerstack screenshots of http://iprobesolutions.com/event-support/conference-interpreters, one of iPhone 6 plus and the other of Google Nexus 6.
Could someone tell me the step by step to fix the left and right margin so there the next is not right against the edge of the mobile devices ? It has the same issue on various other medium screens I tested in Browserstack.
I found below literature from source: https://zurb.com/university/lessons
/change-foundation-s-default-breakpoints but I don't understand what I'm actually supposed to do...I thought Foundation would automatically size for mobile...
If you take a content-first approach, measure in ems or rems.
>$row-width: rem-calc(1000);
>$column-gutter: rem-calc(30);
>$total-columns: 12;
Since I have content edit authority I may prefer a content first approach but I don't know what to do and where I'm supposed to add media queries and which ones using CSS.
[
[
<!doctype html>
<html class="no-js" lang="en-us"> <!--remove the "-us"? -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Established in New York City in 2001, iProbe remains a founder led business offering first class service and support">
<title>Conference Interpreters| iProbe Live Event Support Services</title>
<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" href="/css/foundation-footer.css"> <!-- Must add #relative_template_path# -->
<link rel="stylesheet" href="/css/foundation-features.css">
<link rel="stylesheet" href="/css/foundation-article-card.css">
<link rel="stylesheet" href="/css/custom.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<!-- <link rel="icon" sizes="32x32" type="image/vnd.microsoft.icon" href="/favicon_32x32.ico"/> -->
<script src="/js/vendor/modernizr.js"></script>
<script src="https://use.typekit.net/jsu5jyh.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="row">
<!-- Header and Nav -->
<header>
<!--#include file="/scripts/tools/top-bar-nav.html" -->
</header>
<!-- End Header and Nav -->
<!-- START Breadcrumbs -->
<div class="row">
<div class="large-12 columns">
<div>
<nav id="breadcrumbs" class="breadcrumbs">
Home
Live Event Services
<a class="current" href="/event-support/conference-interpreters">Conference Interpreters</a>
</nav>
</div>
</div>
</div>
<!-- END Breadcrumbs -->
<div class="row">
<section class="large-12 columns">
<h1>our interpretation services</h1>
<p class="marketing">we offer interpreters for conferences, seminars and other live events:</p>
<ul>
<li>A pool of highly qualified interpreters</li>
<li>Professional sourcing and recruitment tools</li>
<li>A selection process to qualify interpreters </li>
<li>Expertise in interpretation standards, techniques and best practices</li>
<li>A technical understanding of language distribution systems</li>
</ul>
<h2>service</h2>
<p>Our interpretation terms of service encompass the following:</p>
<ul>
<li>qualified interpreters will be assigned to fit the specific event requirements</li>
<li>our interpreter coordinator or project manager will promote working conditions to allow for optimal performance of the interpreters</li>
<li>our project manager will stay informed of audio visual technical specifications that are required for multilingual meetings</li>
<li>when dealing with third party stakeholders, we will collaborate representing your best interest in the creation of a successful event.</li>
</ul>
<p>as a professional interpretation service provider we specialize in providing interpreters for corporate meetings. We also provide interpreters for Film and TV production.</p>
<p>we offer the benefit of fifteen years industry experience providing first rate interpreters for a variety of bilingual and multilingual meetings, conferences and other events.</p>
</section>
</div>
<div class="row">
<section class="small-12 medium-8 columns">
<h1>our guarantee: skilled accredited interpreters for your event</h1>
<p class="name">iProbe's interpreters have either a professional or para-professional level of accreditation authorities</p>
<p>professional interpreters are bound by a strict code of ethics covering confidentiality, impartiality, accuracy and reliability, and have completed training and assessment to certify that they have level of linguistic competence.
</p>
<p>our selection process to secure quality conference interpreters for our clients takes into account the language combination, the subject matter, work experience, current and past employers, membership at professional associations, education and aptitude for the assignment. The interpreter is evaluated on the required technique (consecutive, simultaneous, whispering) and experience in similar environments. We understand the importance of the interpreter’s performance and we spare no effort to ensure that the interpreters we provide have the necessary training and experience to satisfy our clients’ needs.
</p>
</section>
<div class="row">
<section class="small-12 medium-4 columns">
<div id="sidebar" class="events-press-cta panel sticky">
<h1 class="subheader">prefer to book interpreters yourself?</h1>
<p>if you prefer to keep the interpreter selection inhouse, you can book the interpreters yourself and still avail yourself of our simultaneous interpretation equipment rentals to distribute the languages.</p>
<p>for suggestions on how to find the best simultaneous interpreters for your corporate events, conferences and conventions in and outside the United States, feel free to refer to our Interpreter Recruitment Guide <strong>(link coming soon).</strong>
</p>
</div>
</section>
</div>
</div>
<div class="row">
<div class="small-12 medium-8 columns">
<div class="panel">
<p>let us help you to select the right interpreters. Contact our interpretation specialists.</p>
<p><i class="fi-telephone"></i>+1-212-489-6035</p>
<p><i class="fi-mail"></i>info#iprobesolutions.com</p>
<!-- <p class="button">Call <b>212-489-6035</b></p> -->
</div>
</div>
</div>
<!--#include file="/scripts/tools/aside-ad-rentals.html" -->
</div>
<!--#include file="/scripts/tools/footer.html" -->
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
It is not a good idea to use a .row directly inside .row , removing the .row will fix the issue.
<body>
<div class="row">
Good way:
<div class="row">
<div class="columns">
<div class="row">
<div class="columns"></div>
</div>
</div>
</div>
Wrong way:
<div class="row">
<div class="row">
<div>
<div class="columns"></div>
</div>
</div>
</div>
It seems to me that the class center-block is missing from the bootstrap 3 style sheets. Am I missing something?
Its usage is described here, http://getbootstrap.com/css/#helper-classes-center
It's new in the Bootstrap 3.0.1 release, so make sure you have the latest (10/29)...
Demo: http://bootply.com/91632
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>
It works far better this way (preserving responsiveness):
<!-- somewhere deep start -->
<div class="row">
<div class="center-block col-md-4" style="float: none; background-color: grey">
Hi there!
</div>
</div>
<!-- somewhere deep end -->
http://www.bootply.com/0L5rBI2taZ
You have to use style="width:value" with center block class
center-block can be found in bootstrap 3.0 in utilities.less on line 12
and mixins.less on line 39
You can use class .center-block in combination with style="width:400px;max-width:100%;" to preserve responsiveness.
Using .col-md-* class with .center-block will not work because of the float on .col-md-*.
center-block is bad idea as it covers a portion on your screen and you cannot click on your fields or buttons.
col-md-offset-? is better option.
Use col-md-offset-3 is better option if class is col-sm-6. Just change the number to center your block.
A few answers here seem incomplete. Here are several variations:
<style>
.box {
height: 200px;
width: 200px;
border: 4px solid gray;
}
</style>
<!-- This works: .container>.row>.center-block.box -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
<!-- This does not work -->
<div class="container">
<div class="row">
<div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
</div>
</div>
<!-- This is the hybrid solution from other answers:
.container>.row>.col-xs-6>.center-block.box
-->
<div class="container">
<div class="row">
<div class="col-xs-6 bg-info">
<div class="center-block bg-primary box">This div is centered with .center-block</div>
</div>
</div>
</div>
To make it work with col-* classes, you need to wrap the .center-block inside a .col-* class, but remember to either add another class that sets the width (.box in this case), or to alter the .center-block itself by giving it a width.
Check it out on bootply.