I am having trouble trying to set my footer to full width. I think its something with the columns but I'm not sure how to fix this. How do I fill the left and right ends of my footer?
html:
<footer class="container">
<div class="row">
<div class="copyrightText">
<p class="col-sm-4"><a href='../credit/index.html'>© Justin Sanchez</a></p>
<ul class="col-sm-8">
<li class="col-sm-1">
<a href="https://www.instagram.com/anothernameforbox/">
<img src="img/instalogo.png" type="button"></li></a>
<li class="col-sm-1">
<a href="https://linkedin.com/in/justin-emmanuel-o-sanchez/">
<img src="img/linklogo.png"></li></a>
<li class="col-sm-1">
<a href="https://github.com/anothernameforbox">
<img src="img/gitlogo.png"></li></a>
<li class="col-sm-1">
<a href="mailto:sanchezjustin6039#gmail.com">
<img src="img/mailicon.png"></li></a>
</ul>
</div>
</footer>
CSS:
/footer/
footer {
display: block;
padding: 20px 0;
font-size: 12px;
width: 100%;
background-color: Azure;
background-size: auto;
}
footer p {
font-size: 15px;
}
footer .col-lg-12 {
display: inline-flex;
justify-content: flex-end;
}
footer ul {
list-style: none;
}
footer li img {
width: 32px;
height: 32px;
}
The reason is you use .container class for the footer. Use .container-fluid for a full width container, spanning the entire width of your viewport.
1) use class .container-fluid instead of class .container.
OR
2) Change style for class .container like this:
.container {
margin: 0;
width: 100%;
}
Demo
Related
I need help with my grid layout for a free code camp project.
Basically, I'd like to show 3 of my portfolio pages in a row. I setup a grid layout for this and can't seem to get the middle page to lineup with the others. Also, as I am brand new, feel free to give feedback on what I have so far in general.
here is the link to the codepen just in case https://codepen.io/eddiepearson/pen/xMaaYX
* {
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400');
}
html, body {
margin: 0;
padding: 0;
}
nav ul {
text-align: right;
position: fixed;
margin-top: 0;
width: 100%;
background-color: #002171;
}
nav ul li {
display: inline-block;
margin: 55px;
margin-bottom: 15px;
margin-top: 30px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
nav ul {
text-align: left;
height: 75px;
}
nav ul li {
margin: 20px;
height: 5px;
}
}
.intro {
top: 0;
background: #002171;
min-height: 55vh;
padding-top: 45vh;
}
.intro p {
text-align: center;
color: #fff;
}
.intro h1 {
text-align: center;
color: #fff;
}
.work {
margin-top: 50px;
}
.work-header {
text-align: center;
}
#projects {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
justify-content: space-evenly;
}
#third-p {
}
.project-pic {
width: 100%;
}
.project-title {
text-align: center;
}
<nav>
<ul style="list-style-type: none" id="navbar">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
<section>
<div id="welcome-section" class="intro">
<h1>Hey i'am eddie</h1>
<p>a web dev with a focus on UX</p>
</div>
</section>
<section>
<h2 class="work-header">These are some of my projects.</h2>
<div id="projects" class="work">
<div id="first-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="second-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="third-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
</div>
</section>
First, you have a small issue (typo I assume) here in the CSS
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
Shouldn't that last part be grid-template-rows?
Also you could use this to manually control each element in the grid:
#first-p {
grid-row:1;
grid-column:3;
}
I am trying to re-create the Google homepage layout for practice and I can't seem to center the Google logo.
I've tried:
text-align: center;
position: absolute;
Increasing the left margin of the logo (but I feel like this is not the right way to do it because it's not centered when I change the browser size.)
I realized that it might be the top bar affecting the logo alignment because when I removed the top bar, the logo became centered. However, putting the Google logo in a separate div and setting position:absolute; also didn't work.
This a link to my project http://codepen.io/wilfredbtan/pen/dXLxOz
Here's a snippet of the topbar and logo html:
<div id="container">
<div id="topbar">
<ul>
<li>
<a href="#">
<img src="the_odin_project/google-homepage/images/blueperson.jpg" style="border-radius: 100%" />
</a>
</li>
<li>
<a href="https://plus.google.com/u/0/notifications/all?hl=en">
<img src="the_odin_project/google-homepage/images/notification.png" />
</a>
</li>
<li>
<a href="https://www.google.com/intl/en/aboout/products/">
<img src="the_odin_project/google-homepage/images/apps.png" />
</a>
</li>
<li>Images</li>
<li>Gmail</li>
</ul>
</div>
<img style="" id="logo" alt="google" src="the_odin_project/google-homepage/images/google-logo.png" />
</div>
Here's a snippet of the relevant CSS:
body {
margin: 0 auto;
padding: 0;
}
#container {
margin: 10px 0 0 0;
text-align: center;
}
#topbar {
margin: 25px 40px 0 0;
}
ul {
list-style-type: none;
}
li {
float: right;
display: block;
padding: 0 0 0 18px;
}
#topbar ul li {
font: 12.5px Arial, sans-serif;
}
#topbar ul li:first-child {
margin-top: -10px;
}
#logo {
margin: 50px 0 10px 0;
width: 35em;
position: relative;
}
#logo{
clear: both;
display: block;
margin: 0 auto;
}
See this fiddle
What I've done here is, moved your logo img to a new div and the width of this new div is 50%. And to make it centered I used margin:0 auto in CSS.
The updated HTML is as below
<div id="logo-container">
<img style="" id="logo" alt="google" src="http://res.cloudinary.com/wilfredxd/image/upload/v1471790654/google-logo_paxdp8.png" />
</div>
and the updated CSS is as follows
#logo-container {
width: 50%;
margin: 0 auto;
}
#logo {
/* margin: 50px 0 10px 0; */
width: 100%;
}
It's very simple. Just change #logo CSS like this:
#logo {
margin: 50px auto 20px;
width: 20em;
display: block;
clear: both;
}
To center an image, use margin: auto; and make it into a block element.
My code ended up looking something like this. Might not be the cleanest solution but it worked.
Here is the HTML
<div class="container">
<div id="logo-wrapper"></div>
<img src="Google_2015_logo.svg.png" alt="logo" class="logo">
</div>
<form action="https://www.google.com/search" style="display: flex; align-items: center; flex-direction: column;">
<div class="rounded-box">
<input autocomplete="off" type="text" name="q">
</div>
<div class="search-button">
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feeling Lucky" name="btnI">
</div>
</form>
</div>
The CSS for container, logo-wrapper and .logo:
.container {
display: flex;
flex-direction: center;
justify-content: center;
align-items: center;
margin-bottom: 20px;
margin-top: 400px;
}
.logo-wrapper {
width: 20%;
margin: 0 auto;
}
.logo {
width: 20%;
}
Not 100% happy with using px in the CSS but yet to find a better work around!
I am trying to realign my images side by side, rather than vertically. I have looked at CSS - center two images in css side by side, to no avail. My code from that link is as follows:
HTML:
<!-- Naviational Bar -->
<div width="100%" height="25%">
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
</div>
CSS:
/*Header and Navigational Bar*/
h1.heading {
padding: 10px;
text-align: center;
font-family: 'Signika', sans-serif;
}
.btn {
/*display: inline-block;*/
margin-left: 10%;
margin-right: 10%;
}
/*Define Button Attributes*/
.navigational-item {
width: 7%;
height: auto;
border-radius: 10px;
position: relative;
-webkit-filter: contrast(50%);
z-index: 100;
}
span.navigational-item {
font-family: sans-serif;
color: red;
}
.nav {
display: block;
margin-left: auto;
margin-right: auto;
}
This is what it looks like:
Is there any way I can lay the image out side by side with a 10px margin between them?
Thanks in advance!
Try below code for "btn" class:
.btn {
margin-left: 10px;
margin-right: 10px;
float:left;
}
You need to put your buttons into a container div like this: (arbitrarily set here for a width of 30% -- edit accordingly)
<div width="100%" height="25%">
<div id="container" style="width:30%;margin:auto">
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
<div class="btn"><img class="navigational-item nav" alt="Home" src="images/buttons/home.jpg"></div>
</div>
</div>
And then set the display property of your buttons to inline-block:
.btn {
/*display: inline-block;*/
margin-left: 10%;
margin-right: 10%;
display:inline-block;
}
See pen here: http://codepen.io/Bangkokian/pen/eppbYL
Have a look at this basic idea :
#container {
text-align: center;
}
.btn {
display: inline-block;
}
.nav {
margin: 0 10px;
}
/* Below is trivial for reszing */
.navigational-item {
width: 50px;
}
http://codepen.io/anon/pen/wKKRMe?editors=110
Do you know the parameters of the images? If so we'll do this
<div class="image_container">
<div class="center">
<div class="btn">
<img src="">
</div>
</div>
</div>
CSS:
.image_container { position: relative }
.center {
position:absolute;
left:50%;
width: 970px;
margin: 0 0 0 -485px;
/*margin left is width / 2*/
}
.btn {
display:inline-block;
margin: 0 10px 0 10px;
}
DEMO HERE
http://jsbin.com/fexasivori/1
EDITED
updated the link and the CSS I mistakenly wrote the wrong math for the margin-left parameter. 970 divided by 2 is not 435 it is 485
I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.
I have been stuck on something very simple for over a day now and I have to ask for help. I am trying to do something simple as centering vertically my social media icons in my footer. I tried to take the same route when someone helped me with the Navigation Bar but I just cannot seem to grasp/understand something to get the same result.
I thought about doing padding but I was not sure if that still would take care of re-sizing or smaller screens, so I wanted to take more a percent route instead of flat amount.
Website for Inspect
Footer HTML:
<!-- Social Media + Footer -->
<div class="container">
<div class="navbar navbar-fixed-bottom">
<div class="collapse navbar-collapse">
<div class="row">
<div class="col-md-12">
<ul class="nav navbar-nav">
<li>
<img src="link/ico-facebook.png"
alt="Facebook Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
<li>
<img src="link/ico-twitter.png"
alt="Twitter Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of Social Media + Footer -->
CSS:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 0 0 0;
position: relative;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.navbar {
position: relative;
min-height: 100px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
#media (min-width: 768px) .navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse {
text-align: center;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.collapse {
display: none;
}
#media (min-width: 768px).navbar-nav {
display: inline-block;
float: none;
vertical-align: middle;
margin: 0;
}
.navbar-nav {
margin: 7.5px -15px;
text-align: center;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
#media (min-width: 768px).navbar-nav>li {
display: inline-block!important;
}
.nav>li {
position: relative;
display: inline-block!important;
}
img.element.style {
width: 100%;
height: auto;
max-width: 32px;
}
img {
vertical-align: middle;
}
You could do it by apply some custom CSS to your HTML elements:
<div class="navbar navbar-fixed-bottom" style="display: table !important; width: 100%;">
<div class="collapse navbar-collapse" style="vertical-align: middle;display: table-cell !important;">
......
......
</div>
</div>
I was the one who answered you the first time, so here I go again to make sure you understand how it works.
First, let's do a tiny change in your HTML markup, as follows:
<!-- Social Media + Footer -->
<div class="container">
<div class="navbar navbar-fixed-bottom">
<div class="collapse navbar-collapse vertimid">
<div class="row">
<div class="col-md-12">
<ul class="nav navbar-nav">
<li>
<img src="link/ico-facebook.png"
alt="Facebook Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
<li>
<img src="link/ico-twitter.png"
alt="Twitter Icon"
style="width: 100%; height: auto; max-width: 32px">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of Social Media + Footer -->
If you pay attention, I have only added the class .vertimid to the line
<div class="collapse navbar-collapse">
we do this in order to accurately target that class so you can re-use it later, as I told you the other day.
Now, you do add this property to
.navbar-collapse.vertimid{display:inline-block} /* replaces display:table */
and that's it.
Remember: you need to vertical align elements relative to the container block. Also, as we're at it, be sure to check your site in Firefox, because you'll find out your social media icons aren't there
Decide what height percentage of the footer you want your social media icons to be...suppose 30%:
ul.nav {
height:30%;
margin-top:35%;
margin-bottom:35%;
}