I have two divs :
<div class="row">
</div>
<div class="row">
</div>
I need to fix the first one while scrolling. I did this :
<div style="position:fixed" class="row">
</div>
Now the divs are overlapping : https://jsfiddle.net/DTcHh/22068/
How can I solve this ?
HTML:
<div class="row fixed"></div>
<div class="row padding"></div>
CSS:
.fixed {
position: fixed;
background: #fff;
z-index: 10;
width: 100%;
}
.padding {
padding-top: 54px // height of your fixed row, you have to change this value on different screen sizes (using media queries)
}
JSFIDDLE
Related
Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
I am trying to center a bootstrap panel vertically and horizontally. The
structure of the document is as follows:
<body>
<div class="container parent">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-body text-center">A Basic Panel</div>
</div>
</div>
</div>
</div>
</body>
The CSS:
.parent {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
JSFiddle
This seems to center the panel horizontally, but not vertically. Any help is appreciated!
I did two changes :
Html
<div class="col-xs-12 col-md-4 col-md-offset-4">
Css(should be declared after bootstrap css stylesheet):
.panel{
margin-top: -25px;
}
.parent {
height: 100vh;
padding-top: 50vh;
}
Why margin-top: -25px ? because in the developers console i saw that .panel css box model is taking 50px in height and its starting from 50 vh height(so it will not be centered and will go below extra 25px) so i subtracted the extra height from .panel to center it correctly.
You can't center a col-md-3 because there are 12 columns total, leaving 9 behind, which you cant split evenly. If you had an even number of columns you were using, you could use col-md-offset-#.
You can center something vertically by using .parent { top: 50% }
The % value can be changed depending where you would like it to appear.
This value is also determined by the percentage of the div size that your element is inside.
I got a little bootstrap problem.
I print a few elements with angular (ng repeat) and the containers adjust their height the height of the images..
View of my recipes
Code:
<div class="row text-center">
<div class="col-lg-3 col-md-12 col-sm-12" ng-repeat="recipe in purchasedRecipes">
<a href="{{recipe.PdfUrl}}" target="blank">
<div class="thumbnail">
<img src="{{recipe.ImgUrl}}" alt=""/>
<div class="caption">
<h3>{{recipe.RecipeName}}</h3>
</div>
</div>
</a>
</div>
</div>
The width is easy to assign with bootstrap (class="col-lg-3 col-md-12 col-sm-12") How can I assign a fixed responsive height, so that my recipes are same size row for row ?
Thanks for helping :)
See here. Top three is:
matchHeight.js
matchHeight.js Docs
matchHeight.js GitHub
Use tables
The example that they gave:
#media only screen and (min-width : 768px) {
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
Huge negative margin and positive padding
Their code:
.row.match-my-cols {
overflow: hidden;
}
.row.match-my-cols [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
I am attempting to make a simple calendar using css.
I have a parent div that will contain the calendar, and I have a div within that that contains the header with "Monday", "Tuesday", etc and is of fixed height. I now want to add divs that represent the rows of the calendar and split the remaining space into six even rows. However, I can't figure out how to divide the REMAINING space into 6 parts. Everything I try makes the div 1/6th of the parent div.
Any tips would be appreciated.
HTML:
<div id="parent>
<div id="header">
ST
</div>
<div class="row">
hi
</div>
</div>
CSS:
.row{
width:100%;
height: 16.66%;
background-color:red;
}
When you want to distribute remaining space left by a flexible element, flexbox is the answer.
html, body, #parent {
margin: 0;
height: 100%;
}
#parent {
display: flex;
flex-direction: column;
}
#header {
background-color: green;
}
.row {
width: 100%;
flex: 1; /* Distribute remaining space equally among the rows */
background-color: red;
}
.row:nth-child(odd) {
background-color: blue;
}
<div id="parent">
<div id="header">Header</div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
There are several ways to do that, and to pick one I need to know more how it should be used.
This sample simply use CSS calc() and subtract 1/6 of the header from 1/6 of the parent.
html, body {
margin: 0;
}
#parent {
height: 100vh;
}
#header {
height: 60px;
background-color:green;
}
.row{
height: calc(16.66% - 10px);
background-color:red;
}
.row:nth-child(odd){
background-color:blue;
}
<div id="parent">
<div id="header">
Header
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
Ok so if you do:
<div class="row-fluid">
<div class="span6"></div><!--span6 END-->
<div class="span6"></div><!--span6 END-->
</div><!--row END-->
picture that as 2 red boxes both taking 50% of the screen.. but every time I do this the span6 has a margin our in between each other and the row above it... How do I make it so that there is no margin above or in between the spans .. I want them to touch above and to the sides.
As you probably don't want to override all .span6 elements, I'd suggest the following:
<div class="row-fluid">
<div class="span6" style="margin: 0px; background-color: red; width: 50%;">foo</div><!--span6 END-->
<div class="span6" style="margin: 0px; background-color: blue; width: 50%;">bar</div><!--span6 END-->
</div><!--row END-->
JSFiddle
EDIT:
As .row-fluid uses width: 100% and .row-fluid .span6 uses width: 48.93617021276595%;, you also need to change width of those divs. See updated code and fiddle.
I would recommend not using grid spans if you don't need grid spans rather than overriding. If you're overriding practically every property of a class, you're better off just using a new class.
.half {
margin: 0;
background-color: red;
width: 50%;
float:left;
}
<div class="row-fluid">
<div class="span12">
<div class="half">First</div>
<div class="half">Second</div>
</div>
</div>
http://jsfiddle.net/cGCHa/4/