I'm making an instagram story style template. What I have done so far is to define a fluid container and inside it, add three columns with content such as progress bars, a logo, etc.
Everything works fine, except that for some reason, there is a space on the right side of the screen at any resolution. I have tried several techniques, such as adding a width of 100% to the container, removing the padding from the body, with no results.
This is the body and the main components of my template:
<body style="background-color: #000; overflow-x: hidden;">
<!-- Container with background color and 100% height -->
<div class="container-fluid" style="height: 100vh; padding:0px;">
<div class="row align-items-center">
<div class="row">
<!-- Hide on small screens -->
<div class="col-lg-4 d-none d-lg-block" style="background-color: #F4F4F4;">
</div>
<!-- Hide on small screens -->
<!-- Main content -->
<div class="col-lg-4" style="background-color: #fff; height: 100vh;">
...
</div>
<!-- Main content -->
<!-- Hide on small screens -->
<div class="col-lg-4 d-none d-lg-block" style="background-color: #F4F4F4;">
</div>
<!-- Hide on small screens -->
</div>
</div>
</div>
</body>
This is the resulting space. I've colored black so it's more visible.
Here is a link to my snippet, I really need help, I don't know what's going on. Thank you very much in advance. I know that the style should not be inline, it is like this while I am building the site.
Solved adding margin: 0px; padding: 0px; to the row class.
Related
Lots of answers of how nesting a container inside of a container-fluid is a bad idea. So without doing that, how do I make the background-color of my non-fluid rows take up the width of the entire screen?
You can see Bootstrap does this on thier own website with the purple but viewing the source was not helpful for me. Any ideas?
You can wrap your container in a another div and apply the background color to this parent div. Please see http://codepen.io/panchroma/pen/aNgvoJ
HTML
<div class="wrap">
<div class="container">
<div class="row">bootstrap row</div>
</div>
</div>
CSS
.wrap{
background-color:teal
}
Update
This is good but for alternating row background colours, one must use
wrap -> container -> row for each row?
If you need alternating rows each with full width background colours, it would be cleaner to use a container-fluid for your page, then use a nested container on each row: http://codepen.io/panchroma/pen/GZbqLV
<div class="container-fluid">
<div class="row one">
<div class="container">
<div class="row">one</div>
</div> <!-- end nested container -->
</div> <!-- end row -->
... <!-- repeat above for each row -->
</div> <!-- end parent container -->
CSS
.one{
background-color:pink:
}
something like this maybe
<style>
.cont {
background-color: yellow;
height: 20em;
width: 100%;
}
</style>
</head>
<body>
<div class="cont">
<!-- content -->
</div>
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'm trying to figure out how to stack two boxes in my view using HTML/CSS, for a mobile web application. I don't want to use JavaScript, or hardcode values anywhere within this skeleton design.
Requirements:
top box is dynamic height, contents need to be absolutely positioned and account for overflow (which is to be hidden if out of bounds)
bottom box is fixed height
http://i.imgur.com/Zun8oIi.png
I've been messing around, and came up with this here. It works in Safari and Firefox. However, what I am not sure of, is that it is valid CSS. Basically, if I deploy this web app, do I have to worry about it breaking in the future because I'm violating some arcane and obscure styling rule? If so... how can I fix the code, so that it's valid?
I'm not concerned about a browser breaking it because they farked up the rendering engine... because it'll get fixed. I'm concerned about whether or not this is valid code to begin with.
Here's the code, there's the CSS styling included in the fiddle
<!-- this is the body of the page, with padding -->
<div class="BodyContainer" >
<!-- define our table -->
<div class="table" style="padding: 0; margin: 0; width: 96vw">
<!-- row -->
<div style="display: table-row; padding: 0; margin: 0">
<!-- cell -->
<!-- this is the cell that needs to be dynamic height -->
<!-- and overflow hidden any possible content as well -->
<div class="cell" style="width: 100%">
<!-- relative inner cell -->
<div style="position:relative; height: 100%; padding: 0">
<!-- absolute hidden cell that takes up the entire space -->
<div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
This text appears on the top
<!-- fixed bottom content -->
<div style="position: absolute; bottom: 0">
This text appears on the bottom of the cell
</div>
</div>
</div>
</div>
</div>
<div style="display: table-row">
<!-- bottom row that's fixed size -->
<div class="cell" style="background-color: red; border-top: 2vw solid black;">
<!-- content that will change on page to page -->
<div style="height: 20vw !important;">
foo
</div>
</div>
</div>
</div>
</div>
Looks solid to me. It's valid CSS3 and I can't find anything to suggest support for the style here will be dropped.
I have a page which breaks down as follows:
<div class="container-fluid" style="min-width:768px">
<div id="main-sidebar"></div>
<div id="main-frame"></div>
<div id="supplementary-sidebar"></div>
<div id="content-container"></div>
<!-- ALL THE INTERESTING CODE GOES HERE -->
<div id="content" class="row"></div>
</div>
</div>
<footer></footer>
</div>
The widths of all the elements in container fill the screen width.
The main-sidebar's width is set to auto.
The main-frame is set to min-width of 72.65%.
The supplementary-sidebar is at 20% of the parent main-frame.
The content-container is at 80% of the parent main-frame.
Basically I want the main-sidebar to be as big as it need to be,
and then have the main-frame fill up the rest of the parent page.
I succeeded at this by accident and have pinpointed the Twitter Bootstrap class that gets the job done. The screen will not fill if I remove it. This is:
<div class="btn-group-justified" style=""></div>
I have tried many different lines of code (included below), which were attempts at doing this consciously. But at this point I can't really go much further.
Does anybody know why this forces the main-frame to fill up the screen?
Here are my attempts:
<!---
NOTHING HERE WORKS
<div style="width:100%"> </div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"></div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"> </div>
<div id="spreader" class="row" style="">
<div class="col-sm-12">
</div>
</div>
<div id="spreader"></div>
#spreader{
display:table;
width: 100%;
table-layout: fixed;
border-collapse:seperate;
display: block;
}
-->
<!--- THIS IS HOW I ORGINALLY GOT IT TO WORK
<div class="row" style="">
<div class="col-sm-12">
<div class="btn-group btn-group-justified" style="">
</div>
</div>
</div>
-->
Here is the the screenshot showing the relevant bootstrap code. For some reason, this still works when I take border-collapse out. But if I include just this in a class like I did with #spreader above (and even if I include border-collapse) it will still not work.
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