I am a HTML / CSS beginner and I can't fix a problem. My problem is that when I zoom in my footer follows me.
By the way, I am using bootstrap 4
html{
position: relative;
min-height: 100%;
}
.Footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px;
background-color: #f5f5f5;
}
<footer class="Footer">
<div class="container-fluid">
<div class="col">
<!-- Les lanngues (Footer) -->
<div class="col-lg-3 col-xs-2">
EN
GER
FR
</div>
</div>
<div class="col">
<!-- L'adresse E-mail (Footer) -->
<div class="col-lg-5 col-xs-5" id="EmailFooter">
<span class="">E-mail : asdpawd#bluewin.ch</span>
</div>
<div class="col">
<!-- Telephone (Footer) -->
<div class="col-lg-3 col-xs-6">
<span id="Tel-Footer" >Tél : xxxxx</span>
</div>
</div>
</div>
</footer>
Not zoomed in : https://prntscr.com/pi19m7
Zoomed in : https://prntscr.com/pi19v3
When I zoom in, it just stop into the button
Welcome to our community. It is better to use a felx-box than absolute.
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body class="d-flex flex-column">
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-black">Sticky Footer using Flexbox</h1>
</div>
</div>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright ©</small>
</div>
</footer>
</body>
Setting the position to absolute may be the issue. This property will not be responsive to zoom ins and will remain in the same position regardless of the movement of other elements. Attempt removing the "position: absolute;" and instead giving the footer a margin-top if you want it to be spaced away from the content above.
I think that position: absolute is the issue here. Try to remove it and then run it. Sometimes working with position can be little tricky as well so try to get over with it and then apply your footer and see the results.
Related
I have an HTML defined as follows:
<div id="container" className='row'>
<div className='col-sm-9 col-md-6 col-lg-8'>
</div>
<div className='col-sm-3 col-md-6 col-lg-4'>
<button id="bot" />
</div>
</div>
So, I want the button with the id of bot (or its container div) to be placed at the bottom relative to the container div with the class row.
I tried to do this:
#container
{
position: relative;
}
#bot
{
position: absolute;
bottom: 0;
}
But, this changes the design considerably, as it will push the bot to the left and on top of its sibling div. As you can see I'm using Bootstrap for dividing it into grids. How can I push this button to the bottom with CSS in my case?
Use d-flex at div and align-self-end for button
Example : https://jsfiddle.net/guiljs/rupoc45j/
<div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
<button id="bot" class=" align-self-end">
Button at Bottom!
</button>
</div>
If you're using React, just change class to className as your sample code.
Using display:flex; you can make the contents of the second column align to the end of the column.
.full-height {
min-height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container py-3 full-height">
<div class='row'>
<div class='col-sm-9 col-md-6 col-lg-8'>
This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This
column has content. This column has content. This column has content.
</div>
<div class='col-sm-3 col-md-6 col-lg-4 d-flex flex-column justify-content-end'>
<button>Button</button>
</div>
</div>
</div>
You're looking for Bootstrap's align-items-end property. Here is a runnable example:
#container {
position: relative;
height: 100px;
width: 300px;
background: gray;
}
#bot {
background: black;
width: 50px;
height: 50px;
}
#first {
height: 100%;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div id="container" class='row align-items-end'>
<div id="first" class='col-sm-9 col-md-6 col-lg-8'>
</div>
<div class='col-sm-3 col-md-6 col-lg-4'>
<button id="bot" />
</div>
</div>
If you only want just that one item aligned to the bottom, see Guilherme de Jesus Santos's answer for an example using align-self-end.
Try #bot's container css
as
'{
height:100%;
}`
I'm trying to build two-column footer with fluid backgrounds using bootstrap grid system, see the example below. The content inside these columns should not be fluid. It also should be responsive and stack on small devices.
Is this possible?
Here's what I did for now, but as i said the content should not be fluid, how do I achieve this?
.footer .row {
height: 100px;
color: white;
}
.left {
background-color: #222;
}
.right {
background-color: #333
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 left">
Left
</div>
<div class="col-md-7 right">
Right
</div>
</div>
</div>
</div>
Link to pen
Example Image
HTML:
<footer>
<div class="container-fluid">
<div class="row">
<div class="footer-col-rt col-md-6">
....
</div>
<div class="footer-col-lf col-md-6">
...
</div>
</div>
</div>
</footer>
CSS:
footer .footer-col-rt {
background-color: #233140;
}
footer .footer-col-lf {
background-color: #2C3E50;
}
I created the following with bootstrap:
The code for the above is this:
<div class="jumbotron cta-header">
<div class="container cta-intro-box">
<h1 class="cta-heading-text">testing testing testing </h1>
</div>
</div>
.cta-header {
z-index: 3;
position: relative;
background-size: cover;
height: 100vh;
padding: 160px 0;
top: 0;
left: 0;
width: 100%;
float: left;
}
There is supposed to be a section under that screen. But it appears to be overlapping, as seen here:
The code for the "section" that isn't supposed to be overlapping is the following:
<div class="container">
<div class="row">
<h2 class="cta-container-header">services</h2>
<div class="col-lg-4 cta-align">
<h2 class="cta-service-text">Front-End web development</h2>
<p class="cta-service-p">test paragraph</p>
</div><!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
</div>
</div>
.container {
position: absolute;
width: 1170px;
}
The container is not supposed to be under the other container like that. I want it to be under (like building blocks). My attempt was to change the positioning but that only kept it overlapping. I tried doing margin-top, but that is not really a solution to not make it overlap.
You are making it to be like that. Can you please explain why did you use properties such as absolute and float on some cases? Maybe we would find a better solution for that.
Working fiddle
<div class="jumbotron cta-header">
<div class="container cta-intro-box">
<h1 class="cta-heading-text">testing testing testing </h1>
</div>
</div>
<div class="container">
<div class="row">
<h2 class="cta-container-header">services</h2>
<div class="col-lg-4 cta-align">
<h2 class="cta-service-text">Front-End web development</h2>
<p class="cta-service-p">test paragraph</p>
</div><!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
</div>
</div>
.container {
width: 1170px;
}
.cta-header {
background-size: cover;
height: 100vh;
padding: 160px 0;
}
This is my css:
html{
position: relative;
height: 100%;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
min-height: 100%;
margin-bottom: 60px;
}
.container {
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.footer p{
line-height: 60px;
}
.messages {
/*background-color: blue;*/
min-height: 100% !important;
height: 100% !important;
}
This is my markup (using blaze for template rendering):
<template name="messages">
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
{{> message}}
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation">
</div>
</div>
</div>
</div>
</template>
This is my output:
What I want is that the line between the list of conversations and the title(John Doe( on the right) should be of 100% height and that any overflow should be scrollable.
I have set the min-height and height of the .messages container to be 100% with the !important but it does not work i do not know why.
How do I make it 100%? Thanks.
P.S: Here is the template after rendering:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="__blaze-root">
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar stuff removed for better understanding-->
</nav>
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
<a href="#">
<div class="message">
<div class="conversation-title">
<img class="pull-left img-circle" height="50px" src="/images/dummy-profile-pic.png" width="auto">
<p class="pull-left">John Doe</p>
</div>
</div></a>
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation"></div>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted">Place sticky footer content here.</p>
</footer>
</div>
</body>
</html>
Just realized that you are using bootstrap framework. You have to cascade the height from the parent div to the inner div till it reaches the .message element.
Otherwise, you can't set the height as 100%. (Any padding or margin in the intermediate div would introduce vertical scroll)
Fiddle that shows the 100% to 2 level down from the body tag.
http://jsfiddle.net/skelly/zrbgw/
Solution 2: You have to use position:absolute for .message
Solution 3: You can use position:fixed
But solution 2 & 3 will remove the elements out of the content flow resulting in need of setting a proper parent height.
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}