I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
Related
This is currently what I have in my HTML code:
I have 3 of the "col-md-4" div's in the row, along with container--wrap in each of those, so that it fills the webpage with 3 equally sized containers. (div row is inside another div with class = container-fluid). When I adjust the window, the containers will stack on top of each other, but only after I make it much smaller (like 2/3). Also, on mobile, it does not stack at all and the containers are all really small. How can I make it so that these containers are able to stack (flex?) easier, and have them stack on mobile automatically? I also have a navbar that looks fine on mobile, but it remains small on mobile, just collapsed. How can I make it larger on mobile? Here is the navbar code:
cov19.cc (website) is an example of what I would like my site to do. The navbar is enlarged on mobile, and the container are stacked on top of each other rather than side by side. Thanks
For the First Problem, use display:flex for the row.I have also used media query so that when the user is on mobile screen or the size of screen is less than 991px, the containers will be on the top of each other.Please run it full screen and shrink the browser window to see the effect.
#media all and (max-width:991px){
.row{
flex-direction:column;
}
.container--wrap{
width:98vw!important;
}
}
.row{
display:flex;
}
.container--wrap{
width:33vw;
text-align:center;
border:1px solid;
transition:all 0.3s;
}
<div class="row">
<div class="col-md-4">
<div class="container--wrap">
This is one
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is two
</div>
</div>
<div class="col-md-4">
<div class="container--wrap">
This is three
</div>
</div>
</div>
I am trying to make a custom login page in bootstrap.
On the left hand side I want my image and on the right side I want my form, I need it to be responsive so on certain screen sizes the image may well need to disappear as I don't want it to become distorted.
The problem I am having it that the image is not showing fully but is instead getting "cut off" when the form ends.
Here my html
<div class="container-fluid">
<div class="row">
<div class="col-md-6 background_image">
</div>
<div class="col-md-6">
<!-- LOGIN FORM HERE -->
</div>
</div>
</div>
I have tried this CSS but to no avail.
.background_image{
background-image: url(/static/picture.jpg);
background-size: cover;
background-position: center center;
display: flex;
}
Here is an image to try and explain better:
image
How can I get it so that the entire left hand screen is filled up with my image?
You might need to set the height of the container. Not sure if it's nested in another container but either way maybe try:
<div class="container-fluid mh-100">
if you want/need it to be full height and using Bootstrap 4, if not another approach with CSS would be:
.container-fluid {
height:100vh;
}
Or set the height of the DIV with the image to whatever you need it to be
.background_image{
...
height:200px;
}
This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo
I am very new to Foundation but found it to be very useful.
I am making a horizontal scroller website.
I have a fixed top bar.
There have to be different background images after each scroll.
Different images have to be in different div, Its a 10 page website, so I have set the body height as 1000px and width as 12000px, I am not able to set properties of the div.
<div class="row">
<div id="home123" class="large-12 columns">
</div>
</div>
#home123{
background-color: red;
}
this isn't working.
Make one page whole div and give css properties and another whole page a div and give different css properties
I'm using Twitter Bootstrap. Here is my problem: I need to set div's background color,which should be full screen, but when I try :
and my HTML:
<div class="rowHome">
<div class="container">
<div class="row">
...
</div>
</div>
</div>
and full CSS:
.container{
width: 960px;
}
...
.rowHome{
margin-top:10px;
width:100%;
background-color:#400143;
}
it look like this, when I resize page:
but when I scroll right I see the bug:
Can someone tell me where is my error ?
This type of problem is mostly come when the parent have flexible width & his child have fixed width. Write this in your css:
body{
min-width:960px;
}
Check this for more iPad background for div blocks not spanning entire width of screen