I am expecting the divs to be aligned horizontally,, but they are stacked one below the other. Why is this happening.
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>5000</h3></div>
<div class="col-md-4">
<h3>5000</h3></div>
<div class="col-md-4">
<h3>5000</h3></div>
</div>
</div>
</footer>
https://jsfiddle.net/hycdvmhn/1/
What is your screen resolution?
It is working in screens with 992px or wider..
Maybe you could use col-sm-4 (768px or wider) or even col-xs-4 (no min-width) based on your needs..
There's nothing wrong with your code.
You are likely viewing it in a screen not wider than 992px which is the breakpoint for the -md- size.
I can see your fiddle fine on my 1920px wide screen. See below. If you drag the vertical bar in the middle and make it smaller, then it will stack over one another when you get to less than 992px.
Related
I am using bootstrap columns, and want the two columns col-md-4 and col-md-8 to be the same height no matter the content. As col-md-4 content will change.
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
A google maps is the only thing in the col-md-8 and the div id map within has the height of 600px.
Add display: flex to the container col-md-12.
You can set a max-height and it will not exceed that height. Since your map is 600px in height, you can set your col-md-4 to that height, and let the content overflow.
I made a Codepen example
Is this what you wanted?
I am trying yo move neweyes class using push and pull on mobile screen but I am unable to do that. How can I move upside this on mobile screen?
<div>
<div class="woke-eye col-sm-12 col-md-4 col-sm-push-12">
<img id="dani1">
</div>
<div class="neweyese col-sm-12 col-md-8 col-sm-pull-12">
<img src=''/>
</div>
EDIT working fiddle
JSfiddle the wokeup eyes div should come later on mobile. now code is doing reverse , on large screen its coming later . but I need on mobile
Here's an example using your code, but modified so that it works the way you want.
<div>
<div class="neweyese col-md-4 col-md-push-8">
<img src=''/>neweyese
</div>
<div class="woke-eye col-md-8 col-md-pull-4">
<img id="dani1">woke-eye
</div>
</div>
You don't need col-sm-12, because that is the default behavior if you don't include it. Otherwise, we're essentially reversing the position of the two columns on MD and up. If the viewport is below MD, then the columns will switch to a width of 12 but since they are reversed the one on the right will be on top.
https://jsfiddle.net/6rtwyazq/12/
If I understand what you want:
You want on desktop .woke-eye to be on left side and .neweyese on right, on small screen you want .woke-eye to be below .neweyese, If so here is an updated JSfiddle, hope this helps.
Update
Check the updated JSfiddle.
Second Update
Reffering to your last comment, this is what you are looking for JSfiddle.
The following code worked for me.
#media only screen and (max-width: 767px) {
.xs-column-reverse {
display: flex;
flex-direction: column-reverse;
}
}
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
I have my simple markup
<div class="row">
<div class="col-lg-6 loginField">
data
</div>
<div class=" col-lg-6 loginField">
<div class="">
test
</div>
</div>
</div>
.loginField{
background-color:white;
}
so my problem is that i am getting 1 white line on desktop screen, but i want to make a 10 px space between those 2 columns without destroying responsive design. Right now if i switch to smaller screen it works, but on desctop there are no space, and if i add margin, this margin presist on smaller screens which is ugly.
P.S. when i say it works on smaller screens, i mean that those 2 columns move under each other and width of the white lines are as they shopuld be.
You simply need to mimic the same breakpoints in the responsive design as is in bootstrap.css:
http://jsfiddle.net/G6nWh/4/
CSS:
#media (min-width: 1200px) {
.margin-left-10 { margin-left: 10px; }
}
HTML:
<div class="col-lg-6 loginField">
<div class="margin-left-10">
test
</div>
</div>
If you have changed the breakpoints, you'll need to update that min-width, but this is the default min-width for Bootstrap's large columns.
When the screen gets smaller, the rule stops being applied, so it won't affect your smaller screens.
i'm trying to stack 3 images inside a container so they appear on top of each others.
My issue is i don't know the image size and i want my container to be equal to the tallest height. I also don't want to use javascript.
Here is a fiddle that demonstrate the expected result and is actually a solution to my problem but only works on Chrome !
http://jsfiddle.net/TnVVa/
here is the html part of it :
<div class="container">
<div class="img-container">
<img src="firstImage.jpg"/>
<img src="secondImage.jpg"/>
<img src="thirdImage.jpg"/>
</div>
<div class="text">
This is my text
</div>
</div>
i'm looking to have the same result on other browsers (at least firefox and IE10+, if more thats better)
As a bonus it would awsome to have the 3 images be vertically centered in their container.