I'm curious if anyone has a solution to this problem, that ISN'T mentioned in the other posts. I have tried all the UP voted solutions mentioned in other posts, but my problem persists.
Specifically - the "example" code and "Stock" bootstrap carousel seems to ADD margins to the images, thus making them smaller than the container, and NOT aligning with the other containers on the page.
Here is the recommended code that works - but has margins I cannot seem to 'easily' remove.
<div class="container" style="margin-top:40px" >
<div class="row" >
<div class="col-sm-12" >
<div id="carousel-msa" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
... carousel code...
I can force it using additional "style" arguments, BUT this makes the image NON-responsive - and I need it to be responsive.
<div id="carousel-msa" class="carousel slide" data-ride="carousel" style="margin-left:-15px; width:1200px">
If you view the JS Fiddle,you will see the images is horizontally compressed, and does not align with the other elements.
https://jsfiddle.net/Le16u319/1/
Posts I've looked at so far - but who's solutions do NOT solve my problem are:
Bootstrap Carousel image doesn't align properly
Twitter Bootstrap: Have carousel images full width and height
Bootstrap Carousel image doesn't align properly
Any help MUCH appreciated.
You don't need a new class. You need to simplify your code instead.
Remove <div class="col-sm-12" >. This block only adds extra padding.
Remove style="margin-top:40px". And remove the position: absolute; property from the .MSA-masthead class.
Remove class="img-responsive center-block" from all slides. Also remove .inner-item {...} and .carousel img {...} from your CSS. Use this code instead:
.carousel-inner img {
height: auto;
width: 100%;
}
Your footer adds long horizontal scroll when the screen width is less than 1200px. To fix it remove the width: 1200px; property from the .MSA-footer class. The width of the footer will be 100% due to the default values.
Please check the result: https://jsfiddle.net/glebkema/mrytx12L/
Please refer this,
In CSS, ADD
.slider{
padding-left:0px !important;
padding-right:0px !important;
}
This is all you'll need, you can disregard the other solutions code that you tried in the CSS.
Then, Make sure to add the reference to the Slider class in the code, here:
<div class="container slider" style="margin-top:40px" >
<div class="row" >
<div class="col-sm-12" >
<div id="carousel-msa" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
...
That should work.
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
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I have a website setup using bootstrap and have the navbar done to my liking. Now I have to work on my container. I wanted something like this image here (http://awesomescreenshot.com/0d61zypfff). The main container overlaps the navbar a little bit. I have used these classes for my navbar and have laid out what I think would be the ideal layout of the code..
<div class="navbar navbar-inverse navbar-static-top" role="navigation"></div>
<div class="container"> //Please do not add any styling to the container
<div class="index"> //background: #ffffff;
This text overlaps the menubar
</div>
</div>
I have added extra padding-bottom to the navbar to make the navbar a little more "buff" and want my index section to overlap it.
Please let me know if I need to add more information.
To add onto #isherwood, you must also set the z-index: -1;. This will make it so that the index div will overlap the navbar.
A little negative margin should do it:
navbar {margin-bottom: -20px;}
Or:
.index {margin-top: -20px;}
At the moment I am doing the following to get a div stretch across the complete width:
<div class="container-fluid banner">
<div class="container">
<div class="row">
<div class="span12">
<img src="image.png">
</div>
</div>
</div>
</div>
In my example, I'm wrapping the content in a container-fluid to force the content to stretch to full width.
As far as I know, Bootstrap doesn't provide a better and easier way to stretch content to full width and my approach has some disadvantages. Are there better ways to accomplish this?
if you use some css reset so you have to look what you have done there with body tag, after that as it was said before use
.container {width: 100%}
You can change the container styles if you wish.
.container {width: 100%}
You would have to make other changes, of course; but whatever is done in CSS can be undone (well, almost everything).
The code goes:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
</div>
I apply a background-color to wrapper, but it does not show unless I set a fixed height. Why does it do that considering content and sidebar are filling wrapper? What other ways are there to get the background-color to appear without setting a fixed height?
As someone said in the comments, if their were floated (which they are), then apply overflow: hidden (which worked).
What other ways are there to get the
background-color to appear without
setting a fixed height?
Float #wrapper
Use a clearfix.
Make sure you have content :)
Make sure #wrapper is display:block or inline-block
Add padding
One way to check, besides Firebug, is set border:1px solid red, and see if you get a 2px line or if you see the border as you would expect. If you see the normal border, there is another problem: time to post your CSS.
Here's a quick-and-dirty clearfix you can try for now, see if this helps:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
<br style="display:block;clear:both;width:100%" />
</div>