I am having an issue with overlapping elements which I don't want. I'm sure it's all right but I can't work out why. This is a one page lay out with a fixed navigation on top. There are five sections home, services, gallery, contact, about. The service section is behind the about section when zooming. I wrote this example to illustrate my point. CSS, HTML, Bootstrap 3
//css
section {
position:relative;
padding:80px 0;
min-height:100%;
}
<section id ="services">
<div class = "container">
<div class = "row">
<div class="col-md-4">
some text and an icon etc...
</div>
<div class="col-md-4">
some text and an icon etc...
</div>
<div class="col-md-4">
some text and an icon etc...
</div>
</div>
</div>
</section>
<section id = "about">
<div class = "container">
<div class = "row">
When zoom in they stack but only show the first block in the service section the other two blocks are hidden behind the about section.
use :
*{
box-sizing: border-box;
}
it will solve .
Related
I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}
I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!
I use bootstrap and have all my content in a container; this centers all the content just the way i want it. The problem is that i also want a fixed bar on the right side with width 250px with facebook like button and maybe some text.
What i also want is that when i re-size the browser to mobile view the whole right bar will appear on the bottom right after the container.
I have tried to make rows around the containers but that did not work work
<div class = "row" >
<div class = "col-sm-6 col-md-4">
<div class ="container">
...
</div>
</div>
<div class = "col-sm-6 col-md-4">
<div class ="container">
...
</div>
</div>
</div>
I also tried to float a div to the right, but that wont work in the mobile view..
I have googled this for hours, downloaded webpages to see source code, and tried a lot of things i cant even remember with no result. Does anyone have an idea?
Here is an fiddle if it can help you :
bootply http://www.bootply.com/117047
html
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 leftarea">
left area
</div>
<div class="col-xs-12 col-sm-4 right-atea">
<div class="row tofix">
<div class="well col-xs-12 rightfixed">
right fixed
</div>
</div>
</div>
</div>
</div>
css
.leftarea{
height:950px;
background-color:blue;
color:white;
}
.rightfixed{
background-color:red;
height:250px;
}
#media (min-width: 940px) {
.rightfixed{
position: fixed;
width:250px;
}
}
I can see that my question might be a bit unclear. And i see that my code attempts are rubbish. But i found a solution:
<div class = "container">
<div class = "row">
<div class = "col-lg-9">
<div class = "panel panel-default">
<div class = "panel-body">
Main content
</div>
</div>
</div>
<div class = "col-lg-3">
<div class = "list-group">
Side Bar Content
</div>
</div>
</div>
</div>
This will make a main content container with a bar on the side for different elements.
Coder's Guide on YouTube have a great tutorial for this. ( http://goo.gl/ZfH6rk )
In an attempt to learn responsive web design, I am teaching myself how to design with bootstrap. I have created a basic grid; the code for the grid is shown below.
HTML:
<div class="row">
<div class="span6 red01">span6</div>
<div class="span6 green01">span6</div>
</div>
CSS:
body { padding: 0px; }
.red01 { background: #ff0000; }
.green01 { background: #00ff00; }
I can see the two divs on my web page, but my problem is with how they are aligned. I'd like to align them horizontally across my laptop's screen. I've tried fiddling with this, but can't get it to work. Could anyone please lend their expertise?
Please check this JSfiddle for you
See the result here Result of 2 col
<div class="container">
<div class="row">
<div class="span12">
<h1>Bootstrap 12 col spanning full page</h1>
</div>
<div class="span6">
<p> Paragraph test col1</p>
</div>
<div class="span6">
<p> Paragraph test col2.</p>
</div>
</div>
</div>
.container class -> Its a wrapper with fixed width , predefined in bootstrap.css .
.container-fluid -> which is fluid wrapper
.row --> This class is built to contain a row of columns. Each new row creates a new zone for laying out columns as desired.
I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect