So, this is how it looks like when I'm on full screen: http://i.imgur.com/quQt09E.png
And this is how I would like to look when I resize to a certain point: http://i.imgur.com/pKGKoCq.png
I'm only able to have div 1 on top of div 2. I tried everything I know but I'm afraid that my knowledge is a little bit limited when it comes to this kind of challenges. I would really appreciate if anyone could help me.
I think you can achieve what you're looking for with a CSS grid like Bootstrap has. Check the following fiddle: http://jsfiddle.net/nunoarruda/156trje7/
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div>
</div>
</div>
I've used the Bootstrap CSS grid and the push/pull classes to reorder the columns beginning from small (sm) screens. You can change it to medium (md) or bigger. Check the Bootstrap documentation for that: http://getbootstrap.com/css/#grid-column-ordering
AS i see there is a grey rectangle below the div2. That induce me to this that div 2 is inside div1. To set permanently div2 on top on div1 I would use the following schema:
1) Create a general div, this will include the two div's inside.
2) Create div2 inside the general div with a width of 100% and height 50% of the general div.
3) make the same with div1 but define it below.
This way both divs are fixed in a previous div wich you can move as you wish.
Related
I have a work in progress
www.codepen.io/anon/pen/yMmjZb
The issue I am having is that my 3rd row (the one with the 3 columns) has a background colour set but this is bleeding beyond the boundary I would like. I am suspecting due to a row being the full page width. I have tried applying the background to the columns individually but when the page is resized each column becomes a different height so the bottom of the fill isn't consistent.
Any solutions?
I have checked your code and here is the solution. Just bind the col-md-4 with a col-md-12 to occupy the padding and give your class col-homepage to it.
Here is pen to it-
http://codepen.io/sahildhir_1/pen/BWXVoz
Just remove the margins from the row. Currently you have -15px; in margins. Make it 0 and row wont span the entire width.
Add <div class="col-md-12"> after the row. In bootstrap, we always wrap columns in a row. Just like you did in second row, you need to add col-md-12 class after the .row
So the code will looks like -
<div class="row">
<div class="col-md-12">
<div class="container-fluid col-homepage">
....
I was just wondering if someone can give me a hand, i've tried for 3 hours to solve this issue. I need to have the interface like on the picture by using grids, or anything.
The closest thing i can get is when everything displayed correctly except the second bottom grid. It usually gets below the white line (thats the starting point).
Could someone give me a tip on how to get around this problem.
You have minimum two options:
one is to make the grid elements absolutely positioned and give them top, left, right and bottom values. The parent element (grid container) should have "position:relative;" (or can be fixed or absolute, but in your case relative will make more sense).
Another option is to write markup like this:
<div class="col-xs-6">
<div class="col-xs-12">
one
</div>
<div class="col-xs-12">
two
</div>
</div>
<div class="col-xs-6">
three
</div>
Basically you wrap the two divs on the left into one parent div so the layout will not break. Just make sure the height of inner divs are 50% of the height of the right box.
I'm trying to achieve a dynamic layout option for a site, but I can't nail down how to make this work. The effect I'm trying to create should look like this:
Where:"1" will have text, and have a dynamic height;
"2" will have a background color and also fill the containing div below it, with a small vector image centered horizontally and vertically. I want to use a dynamic height on this so no matter how much text is in "1", it fills the rest of the bottom of this container;
"3" is an image (img-responsive) that fills the right half of the container. It will be what sets the height of the container div, with the possibility of different sized images being implemented.
I want these to display as shown on desktop browsers and landscape tablets, but to fall into a single column when its viewed on a smaller screen format.
I'm currently using two col-md-6 for each of these, and had the desired background color on the container. The problem I'm running into with bootstrap is when the screen is between 992px and 1200px, the content is collapsing to a smaller screen size, but it is making the bottom of "2" extend beyond the bottom of "3".
I've tried using flexbox for this, but when I use it in conjunction with col-md-6, it doesn't collapse to the single column on the smaller screen sizes. It also just doesn't seem to work too nicely with bootstrap 3.
I'm open to any type of solution outside of completely taking out bootstrap. Thank you all so much for your time and assistance!
EDIT 1:
Totally forgot to add the code. What I have so far is as follows:
https://jsfiddle.net/b86k1myr/
<div>
It's kind of wonky because bootstrap isnt also enabled. But that's what I have for that so far. The other attempt with flexbox is as follows:
https://jsfiddle.net/mkg73uvk/
As a tip for the future, you should always post the markup you're using currently.
Try this:
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-12">1</div>
</div>
<div class="row">
<div class="col-md-12">2</div>
</div>
</div>
<div class="col-md-6 col-sm-12">3</div>
</div>
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.