I have this blue top link here and this top is taking all width size, and that's what I want. So if you resize your window or open it on mobile this blue div is putting margins both sides, twitter bootstrap responsive is doing that. My code is exactly like this answer but tb still putting margins, that's my code:
<!-- this div is inserting blue bg image and wrap all content -->
<div class="background-top">
<div class="container">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
I would use a similar media query to target the top background div as its Bootstrap that seems to be adding the body padding. Give this a go:
#media (max-width: 767px) {
.background-top {
margin-left: -20px;
margin-right: -20px;
}
}
Related
I have a page, when i am looking this page on a laptop screen the two divs are rendering properly but when i am looking this page on mobile screen these two divs are overlapping above each other. I want to remove this overlapping of these divs and want to read first div then second div.
How to do that ?
#media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay,
.vc_row-fluid.darker-overlay{
display:inline-block; /* Change this to inline-block instead of block */
}
}
but this is creating issue for header,solve that accordingly
check out with Bootstrap. it provides with responsive CSS. you have to include the div class that you require.
example: if you have two divs, put them into one main div and then call each div with separate div class. like
<div class="col-sm-12">
<div class="col-sm-6">
// your code for first div
</div>
<div class="col-sm-6">
//your code for second div
</div>
</div>
try like this. it may help you.
I hope i understand your question because its not really clear(No code provided)
But what i think you need to do is the following:
<!-- Probably your html part -->
<div class = "wrapper">
<div class = "container">
<!-- Some content-->
</div>
<div class = "container">
<!-- Some content-->
</div>
</div>
Here comes the css magic.....
.wrapper{
display:block;
}
.container{
display: inline-block;
}
#media only screen and (max-width:768px){
.container{
width:100%;
}
}
#media only screen and (min-width:768px){
.container{
width:50%;
}
}
By using media querys you can easily fix this kind of stuff
You added as a comment to your question that a demo URL was http://voyagecontrol.com/canarywharf
Origin of the problem: #venue_draft has inline styles including height: 900px.
Solution: it should be removed (elements should adapt automatically to more or less content. Not fixing height is a good start for that) or, if other problems occur, replaced by min-height: 900px
Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!
I have a layout as follows:
<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>
I would like the span9 div and the span3 div to both become span12 divs when the user is viewing the page on a tablet or mobile device, and I would like them to become vertically stacked above on another.
Can this be accomplished and if so how? My current solution relies upon a second set of divs which I show on small browser windows and I hide the above divs.
Using Bootstrap 3, this is super easy:
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
At typical desktop resolution (> 992px), the divs will be 9/12 columns & 3/12 columns. On anything smaller, they will be 12/12.
Twitter Bootstrap 3 grids
Using Bootstrap 2.3.2, you can add a media query:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.span9, .span3 {
display: block;
float: none;
width: 100%;
}
}
I have a #wrapper div that is 100% height. Inside of that I have several content divs, each are displayed as inline-block and have a bottom margin. The problem is that this bottom margin is somehow being collapsed.
The problem can be seen with very simple code:
<div id="wrapper">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
I've created an example which can be seen here: http://jsfiddle.net/Y6tJw/
I have a feeling this is a webkit issue as both Firefox and IE render the page with the proper margin. Any help?
Don't ask me why it works, but this will work http://jsfiddle.net/Y6tJw/2/
Style
#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}
HTML
<div id="wrapper">
<div id="innerwrap">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>
this is happening because you gave your body a height of 100% with the min-height. Try giving height:auto; this'll work
I have many absolute position div , how can i change it align to center when orientation change to center?
lets say
<div style="position:absolute; top:0px;left:0px">
<div style="position:absolute; top:0px;left:11px">asd</div>
<div style="position:absolute; top:0px;left:15px">asd</div>
</div>
I tried margin: 0 auto and it conflicted with the absolute also.
the reason to have the positioning as absolute because there will be animation of the div and many div will stack on a place
You need to get rid of the positioning and setup the widths and margins for each orientiation to make this work..
This is based on the
/* Portrait */
#media screen and (max-width: 320px)
and
/* Landscape */
#media screen and (min-width: 321px)
{
CSS methods.
I have set up an example for you here.
To see it live either copy the url from this jsbin page and view it in the iPhone emulator or view it in a real mobile browser.
I think i have solve this by
<div style="position:relative; margin: 0px auto;">
<div style="position:absolute; top:0px;left:11px">asd</div>
<div style="position:absolute; top:0px;left:15px">asd</div>
</div>
because by setting the parents to relative the top: 0 left : 0 of the children div will be at the top left corner of the parent div
the more detail explanation of this positioning is at http://www.barelyfitz.com/screencast/html-training/css/positioning/
So simple
.[you-class-name]{
......
Other element for design the div
.........................
left: 50%; //Most Import to align center of screen, tested in all browser
}