I am looking to make a layout page, which has a banner at the top, that handles the following:
Desktop - Maximized screen (Would have a center page used of 1024px limited)
Desktop - as soon as the size goes lower than 1024, the banner scaled down, to fit the width of the screen
Phone/Mobile - Banner uses full width
Below is a technically rendered diagram, using software which is beyond any of your imaginations, so I will not elaborate, but hopefully it get's the point across.
First box shows a screen with the browser maximized. Banner goes to 1024 max, as does the content of the screen below it.
Next image shoes a 1024 resolution screen. Screen uses full browser.
Last image down shows a screen, with the browser NOT maximized, and using less than 1024 pix. The banner resizes down (doesn't crop... resizes)
And the bottom right is a phone. No brand... just a phone. :)
Can you show how this can done? Can the image (an ?) be resized based on these requirements?
My attempt at the moment:
<div class="container">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<img class="item active img-responsive fullsize" src="/Content/images/1.jpg" />
<img class="item img-responsive fullsize" src="/Content/images/2.jpg" />
<img class="item img-responsive fullsize" src="/Content/images/3.jpg" />
</div>
</div>
<ul class="nav nav-pills navbar-inverse">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list"></span> Our Friesians</li>
<li><span class="glyphicon glyphicon-picture"></span> Stock</li>
<li class="dropdown">
<span class="glyphicon glyphicon-info-sign"></span> Help <b class="caret"></b>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About Us</li>
<li class="divider"></li>
<li class="dropdown-header">Contact Details</li>
<li><span class="glyphicon glyphicon-inbox"></span> Contact Us</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Directions</li>
</ul>
</li>
</ul>
<div class="container-fluid">
This is the Index page.
</div>
</div>
This is the simplest possible way to do it. You can just make the image max-width: 1200px, but that could be a problem down the line. I'm pretty sure this has been asked, and answered already. I'm too lazy to find it.
<html>
<head>
<style>
#mlp{
/*The next line controls the fit of the image.*/
max-width: 100%;
}
#container{
/*The next line controls the max of the container.
Change it to the value you want.*/
max-width: 1000px;
border: 1px solid black;
}
/*media query suggested as an alternative to the above.*/
#media(max-width: 480px) {
#mlp {
max-width: 100%;
}
#container {
max-width: 480px;
}
}
</style>
</head>
<body>
<div id="container">
<img id="mlp" src="http://img64.imageshack.us/img64/4163/01an1.jpg">
</div>
</body>
</html>
There are css media queries that would switch out the image with hiding instead, but it's more code. Media queries should be placed at the bottom to take precedence when they're needed.
Related
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
So i've been working on a little project, and noticed that i have to do more media queries than i would like to?
From my understanding, bootstrap should be taking care of the responsiveness for me, so i'm sure i have done something wrong. Describing the problem in words is hard, so you can take a look at this image:
Here is how it looks, desktop size:
http://gyazo.com/be1c1d6f7af31adf6cf2c21fe1697f67
Here is how it looks, when scaled down to mobile:
http://gyazo.com/27bb7da880fd7a789e8b57c88e0b9759
As you can see, the content moves OUT of the white box, and doesn't go down to the next line, which i think it should do by default, or am i overestimating Bootstrap?
Here is some of the code that makes the box:
.overview {
height: 500px;
background: white;
margin-top: 40px;
box-shadow: 5px 5px 5px #f2f2f2;
border-left: 2px #f2f2f2 solid;
border-top: 2px #f2f2f2 solid;
border-radius: 7px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 velkommen">
<i class="glyphicon glyphicon-cog topglyph"></i>
<h1>Kontrolpanel</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-4 brugeroplysninger">
<h1><span class="glyphicon glyphicon-user orange"></span> Oplysninger</h1>
<div class="brugeroplysninger-divider"></div>
<ul>
<li><span class="glyphicon glyphicon-envelope orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">mail#mail.com</span>Skift
</li>
<li><span class="glyphicon glyphicon-tag orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-tags orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-asterisk orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">******</span>Skift
</li>
<li><span class="glyphicon glyphicon-picture orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">Billede</span>Skift
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="overview">
fdsfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
</div>
</div>
</div>
</div>
</div>
What am i doing wrong? Please tell me if i need to show more code, i'm sure i'm doing something wrong.
Or do i just have to keep doing media queries?
Note:
I tried assigning a width to the class overview, no result. THat includes an auto width, a max-width and a fixed width.
Thanks for your time!
It hasn't got to do with Bootstrap. By default browsers don't break words into two parts when they don't fit on a line anymore. In order to be able to do hyphenation properly they would need to have knowledge about the language and how to split words into syllables. Browser support isn't there yet but
hyphens: auto;
should do it in the future. If you don't care where the word is split simply add
word-break: break-all;
to the overview class. And if you simply don't want to show the part of the word that overflows add
overflow: hidden;
to the overview class.
You may also look into the wbr tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
represents a position within text where the browser may optionally break a line
Working with an angular and bootstrap navbar. When the screen is resized horizontally below 768px the search field at the right falls down to the line below. I am trying to keep it in the top line and just let the navbar overflow to the right.
Here's a plunker! http://plnkr.co/edit/krAGXP6JEVZpLFNvRlsw?p=preview
I am using Chrome 32 to test this widget.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Umbrella_Corporation_logo.png" style="width: 31px;height:35px;"/>
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Foo
</li>
<li>
Bar
</li>
<li>
Baz
</li>
<li>
Bop
</li>
</ul>
<div class="pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Why does this silly search field insist upon dropping down a line on smaller screens?
Corrected: The input-group-btn seemed to be the cause of the problems for me.
Adding this:
.navbar-form .input-group-btn {
display: block;
}
.navbar-form .input-group {
margin-right: 30px;
}
Ensured the search never jumped down.
Plunker here
Looks like it was a combination of a few items. First being the min-width width media query for a few items floating only when the screen size is above 767px. ( you could put these inside a max-width instead of leave them default, however you want to set it up )
.navbar-nav,
.navbar-nav > li,
.navbar-header {
float: left;
}
And then this little bugger's width within a min-width query throwing a wrench into the flow set on another media query
.input-group-btn {
width: 1%;
...
...
}
Again, I set a few items without the query, which you could stuff into a max-width query or just have them default.
http://jsfiddle.net/evanbriggs/9xtLtrr4/
Evan and mccannf helped me to identify that my width styles were being updated but their values weren't being accurately reflected within the chrome dev tools. Building from their recommendations I found that the following addition to my css was the best solution.
.pull-right .navbar-form .input-group .input-group-btn {
width: auto;
}
I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.
Thanks for any help you can provide.
-A
EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Contact</li>
<li>Now Playing</li>
<li class="dropdown">
Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs</li>
<li>Host an Event</li>
<li>Educational Initiatives</li>
</ul>
</li>
<li class="dropdown">
Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li>Physics Homepage</li>
<li>Physics and Astronomy</li>
</ul>
</li>
<li>Volunteer</li>
<li>FAQ</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The default navbar html code is the following:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:
.navbar-inner {
min-height: 40px;
}
You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a> padding as well.
.navbar .nav > li > a {
float: none;
**padding: 10px 15px 10px;**
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
}
.navbar .brand {
display: block;
float: left;
**padding: 10px 20px 10px;**
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777;
text-shadow: 0 1px 0 #FFF;
}
If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-height property and just change its value, adjusting the padding of the elements I've mentioned above.
For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.
EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-inner min-height too, and play with the values.
Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:
#media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
where 1200px was changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.
Having some trouble achieving the style I would like for my responsive bootstrap navbar.
I'm pretty new to bootstrap/css and jsfiddle http://jsfiddle.net/YfmwV/ is what i've hacked together so far.
<div class="navbar">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home
</li>
<li>Showtime
</li>
<li>Motivation
</li>
<li>About
</li>
<li>Testimonials
</li>
<li>Gallery
</li>
<li>Merchandise
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
The problem is related to the following code which achieves what I am after in the large screen view however completely ruins the menu in responsive mode.
.navbar .nav>li {
width: 12.5%;
}
I am trying to get the navbar items to take up the whole space of the navbar as opposed to being aligned either left or right, the only way I could think to do this was to set the width to a percentage, this is not ideal.
If someone could point me in the right direction that'd be amazing.
You could use a #media query so that your width:12.5% is only applied for desktop mode..
CSS
#media (min-width: 979px) {
.navbar .nav>li {
width: 12.5%;
}
}
Demo: https://www.bootply.com/wauacskYQj
I'm not totally understanding what you mean, but for as far as I can understand, you want to have the hover and active effect to not have any padding/margin on either sides.
Navbar-inner has a padding left and right of 20px, if you set those on 0, the bar is taking the full width of your menu.
.navbar-inner {
padding-right: 0;
padding-left: 0;
}
Is this what you mean?