This is currently what I have in my HTML code:
I have 3 of the "col-md-4" div's in the row, along with container--wrap in each of those, so that it fills the webpage with 3 equally sized containers. (div row is inside another div with class = container-fluid). When I adjust the window, the containers will stack on top of each other, but only after I make it much smaller (like 2/3). Also, on mobile, it does not stack at all and the containers are all really small. How can I make it so that these containers are able to stack (flex?) easier, and have them stack on mobile automatically? I also have a navbar that looks fine on mobile, but it remains small on mobile, just collapsed. How can I make it larger on mobile? Here is the navbar code:
cov19.cc (website) is an example of what I would like my site to do. The navbar is enlarged on mobile, and the container are stacked on top of each other rather than side by side. Thanks
For the First Problem, use display:flex for the row.I have also used media query so that when the user is on mobile screen or the size of screen is less than 991px, the containers will be on the top of each other.Please run it full screen and shrink the browser window to see the effect.
#media all and (max-width:991px){
.row{
flex-direction:column;
}
.container--wrap{
width:98vw!important;
}
}
.row{
display:flex;
}
.container--wrap{
width:33vw;
text-align:center;
border:1px solid;
transition:all 0.3s;
}
<div class="row">
<div class="col-md-4">
<div class="container--wrap">
This is one
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is two
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is three
</div>
</div>
</div>
Related
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
I am very new to Foundation but found it to be very useful.
I am making a horizontal scroller website.
I have a fixed top bar.
There have to be different background images after each scroll.
Different images have to be in different div, Its a 10 page website, so I have set the body height as 1000px and width as 12000px, I am not able to set properties of the div.
<div class="row">
<div id="home123" class="large-12 columns">
</div>
</div>
#home123{
background-color: red;
}
this isn't working.
Make one page whole div and give css properties and another whole page a div and give different css properties
As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?
Disregard the blue box.
This is what I have so far:
<div class="container">
<div class="col-xs-12 col-md-7 view">
<div id="panelviewer">
<div class="row">
<div class="col-xs-12 col-md-6 panel1">one</div>
<div class="col-xs-12 col-md-6 panel2">two</div>
</div>
</div>
</div>
</div>
Jsfiddle
There are other ways to keep the divs side by side and achieve what you need:
#panelviewer .row {white-space:nowrap;}
.panel1 {display:inline-block;float:none;background:#aaa;}
.panel2 {display:inline-block;float:none;background:#eee;}
Demo http://jsfiddle.net/7HcQ8/3/
No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:
#media (max-width: 768px) {
.sizeSmaller {
height:50%;
width:50%;
}
}
Adjust the width of the media query to suit your neds.
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
I have to make a very simple responsive website, thinking to use Bootstrap 3. First time playing around...
All content is maximum width 960px, very simple, just header (960px), a main interface (630px) and a sidebar (320px), with an space of 10px between both.
When we are on small devices, the sidebar should be stacked under main interface.
So, I know that Bootstrap3 accepts 12 grids, each grid maximum 70px + max 30px gutter (dividing each grid).
If I apply the code below...
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>my Header, should be 960px</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 ">This should be 630px</div>
<div class="col-sm-4 col-xs-12">This should be 320px</div>
</div>
</div>
Of course I allways get a 1170px in all content (8+4=12 grids) in desktop devices.
How can I do to make the content 960px width?
Wrap your rows in a fixed width container like..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
The row and col-* will still work responsively inside the fixed width container.
Here's a working demo: http://bootply.com/96043