I would like to make two specific columns in the layout below, stretch the entire page height, unless their on mobile (tablet they can still stretch as most tablets are 720.
<div class="rows">
<div class="col-md-1">
</div>
<div class="col-md-10">
</div>
<div class="col-md-1">
</div>
</div>
col-md-1, right now only stretches as far as the content you put in it stretches, how ever I would like, on anything higher then 720 for it to stretch the pages full height, that is they should stretch down to the footer and then on anything smaller then 720 they should just be regular height boxes, that is "stretch to fit their contents"
How could I achieve this with out breaking default bootstrap behaviour to much.
1) In your HTML add a new class to the div(s) that you want to increase to page height
2) In your CSS, use #media-screen with a minimum width of 720px so that you're only specifying this for non-mobile devices, and within the new class specify min-height as 100%. See below..
#media screen and (min-width: 720px){
.new-class {
min-height:100%; }}
Related
I have a that is changing in width (col-x) and in height (h-100) depending on the browser window. Inside that div is a very large image being displayed. The problem with .img-fluid is that it is only constraining in width, depending on the container. But I need a solution that also scales height, when the size of the container div shrinks. But I have not found a solution.
I tried different combinations of min-height, max-height, object-fit and so on, but always the image does not shrink in width, when the container gets smaller (or then when the proportions of the div change from portrait to landscape it does not follow.
I tried to build a basic plunker to demonstrate using vh for the height of the wrapper. So the goal would be for both images to always stay inside the column. You can try playing around with the height and width of the browser to see the effect.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}
https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview
Add css height:100%; for image
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I'm working on a self contained responsive css component (type of carousel) for a website i am implementing.
The need is to have an infinit number of content items (loaded from a server), showing exactly two at a time. As the user advances through the list of items, they appear to scroll to the left with new items transitioning in from the right pushing the current items to the left.
the items should get their width according to the current responsive layout.
The general idea is to have viewport which is a part of the page layout and can accept any width stated in px or in %, a container which gets width: 100% so that it fill the size of the viewport. and items which are arranged horizontally side by side without wrapping, the items get a width of 50% so exactly two items fit into the container/viewport and the rest of the items overflow (and are hidden.)
<div class="viewport">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<!-- more items get loaded as the user advances through the content -->
</div>
</div>
"scrolling" is achieved by setting a negative margin on the first item - which this technique i can always set a negative margin which is: <number of items> * 50%
I got this mostly working in the following jsfiddle: http://jsfiddle.net/gZBEV/5/
The items are arranged correctly and they get their width according to the width of the surrounding viewport. (use the buttons to emulate moving/scrolling through the items)
The problem is a horizontal gap (shown by the arrow) which appears between each item which screws up the layout.
The solution to this would be to find a way were the items have no horizontal gap between them like so:
Use this fiddle http://jsfiddle.net/gZBEV/5/ as a starting point.
It's because the elements are display:inline-block. Inline block level elements respect line-height and font-size and whitespace. change the font-size of the parent to 0px and the gaps disappear. This means you will have to reassign the font size after the fact (Great for image only sliders. Not so much for content sliders).
http://jsfiddle.net/RAbSU/
.container {
...
display: inline-block;
font-size: 0px;
& > * {
font-size: 12px;
}
...
EDIT: otherwise, you could just change the format to display:block with float:left.
If you remove the carriage returns inside the div, this will remove the space:
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
I'm making my first website using Twitter Bootstrap, and am trying to understand why the logo image on my page stops scaling and jumps in size once the screen size reaches a small enough size.
The current behavior makes the site look horrendous on the iPhone.
The image file itself is a 200 x 500 px .gif
Here is a jsfiddle with the code in it: http://www.jsfiddle.net/eugip9/uyGH9
And here is the code from the div it's in:
<div class="row">
<div class="span1">
<img src="./HomePage/logo-02.gif" center alt>
</div>
<div style="text-align:left;padding-top: 5em;text-indent: 5em;"; class="span11">
<h1>Site Title</h1>
</div>
</div>
The image scales well down to a point, but once the screen gets small enough the image goes back to 200px x 500px
I'm using the default bootstrap-responsive.css
Every span has a 100% width when the screen is less than 767px. So, due to every image of the theme has a max-width: 100% property, you image is resizing when the screen is less than 767px.
I recommend you to resize the image to the desirable width with Photoshop (or similar). It's not always a good idea to resize images with CSS. If you don't want to do that, just put a id to the image and then put a max-width: 64px to that logo.
For an example on Bootstrap website
Ctrl +F "Nesting Columns". With a wide enough window both of the Level 2 columns are next to each other, but reducing the size so they don't fit anymore they nicely snug under each other. How can I do this?
I have an almost identical layout, except I have several divs stacked and 1 sidebar floated to the right. Something like this:
<div id="container"> //Width: 96%; margin: auto; max-width: 870px;
<div id="sidebar">Sidebar</div> //Floated to the right and "width: 26%;"
<div id="box1">Box 1</div> //Width: 68%; for every box# id
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
I can squeeze it together as I please and everything works, but as the width of the window gets reduced I want the sidebar to stack on top of the box divs like in the bootstrap example. If I reduce the width of the window the sidebar goes on top of the divs, but it is still floated to the right and just looks broken.
What you want is probably media queries.
http://www.w3.org/TR/css3-mediaqueries/
E.G.
#media screen and (max-width: 768px) {
// insert css rules here
}
With the above CSS code you would place the CSS rules you want to come into play for devices with a resolution of 768px or below.