I am trying to follow a guide to using CSS Grid here: Tutorial. I am not trying to make the same thing.
I have two defined areas: aside and main.
Here is my grid definition:
body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"aside main"
"aside main";
}
aside is my left-hand navigation such as Profile, Support, etc. main is obviously the main content area.
When I view the page in Chrome on my laptop, the aside container / grid area takes up 100% of the page, no problem.
When I use Chrome's dev tools and re-size to a mobile view, the aside grid area stops short of the full page, it only displays one or two menu items. The other items are displayed, I can see them if I select all on the page, they are just outside the aside container.
It seems like I need to specify more rows for the content to fit? But that does not sound right because how would I know how many rows I need for varying amount of content?
I tried to use grid-auto-columns: auto; but that didn't help.
Note: I am messing around with media queries although I had the problem before I started doing that so I don't think it's related.
Any help would be greatly appreciated.
Edit
Image of Desktop
Image of Mobile
Here is my full CSS and HTML:
html, body {
height: 100% !important;
}
body {
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 60px 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"main";
}
nav {
grid-area: nav;
background-color: pink;
}
aside {
grid-area: aside;
display: none;
background-color: rgb(10, 116, 187);
color: white;
border-right: 5px solid rgb(2, 106, 175);
}
main {
grid-area: main;
color: #4C4C4C;
background-color: rgb(248, 248, 248);
}
/******************************************
MEDIA QUERIES
******************************************/
/* 600px screen width OR larger */
#media only screen and (min-width: 600px) {
body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"aside main"
"aside main";
}
aside {
display: inline;
}
nav {
display: none;
}
.brandText {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.smallProfileImageDiv {
height: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.smallProfileImageDiv img {
width: 100px;
height: 100px;
}
.imgCircle {
border-radius: 50%;
}
.profileNameBox {
text-align: center;
margin-bottom: 60px;
}
.profileName {
font-size: 16px;
}
.positionTitle {
margin-top: 5px;
}
.leftNavOptions {
margin-left: 25px;
}
.leftNavItemOption {
margin-bottom: 20px;
padding: 5px;
}
.leftNavItemOption:hover {
margin-bottom: 20px;
padding: 5px;
background-color: orange;
}
.leftNavOptionIcon {
min-width: 20px;
font-size: 18px;
}
.leftNavOption {
margin-left: 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CarePower.io</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<meta name="author" content="CarePower.io" />
<!-- Favicons -->
<link href="" rel="icon">
<link href="" rel="apple-touch-icon">
<!-- Bootstrap CSS File -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<nav>
Hi
</nav>
<aside>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 brandText">
CarePower.io
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="smallProfileImageDiv">
<img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="profileNameBox">
<span class="profileName">John Doe</span>
<div class="positionTitle">
<span class="badge badge-primary">CEO</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
</div>
</div>
</div>
</div>
</aside>
<main>Main</main>
<!-- JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
</body>
</html>
You should avoid applying the display grid directly to the body element to avoid having unwanted element considered inside the grid. Then you can simplify the grid-template-rows using 60px auto auto and get rid of the grid-area on the mobile view. You can also consider using min-height:100vh to have full height page and allow the content to grow on small device.
div.body {
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 60px 1fr;
min-height: 100vh;
}
nav {
background-color: pink;
}
aside {
display: none;
background-color: rgb(10, 116, 187);
color: white;
border-right: 5px solid rgb(2, 106, 175);
}
main {
color: #4C4C4C;
background-color: rgb(248, 248, 248);
}
/******************************************
MEDIA QUERIES
******************************************/
/* 600px screen width OR larger */
#media only screen and (min-width: 600px) {
div.body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas: "aside main" "aside main";
}
aside {
grid-area: aside;
}
main {
grid-area: main;
}
nav {
display: none!important;
}
.brandText {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.smallProfileImageDiv {
height: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.smallProfileImageDiv img {
width: 100px;
height: 100px;
}
.imgCircle {
border-radius: 50%;
}
.profileNameBox {
text-align: center;
margin-bottom: 60px;
}
.profileName {
font-size: 16px;
}
.positionTitle {
margin-top: 5px;
}
.leftNavOptions {
margin-left: 25px;
}
.leftNavItemOption {
margin-bottom: 20px;
padding: 5px;
}
.leftNavItemOption:hover {
margin-bottom: 20px;
padding: 5px;
background-color: orange;
}
.leftNavOptionIcon {
min-width: 20px;
font-size: 18px;
}
.leftNavOption {
margin-left: 15px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="body">
<nav>
Hi
</nav>
<aside>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 brandText">
CarePower.io
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="smallProfileImageDiv">
<img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="profileNameBox">
<span class="profileName">John Doe</span>
<div class="positionTitle">
<span class="badge badge-primary">CEO</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
</div>
</div>
</div>
</div>
</aside>
<main>Main</main>
</div>
<!-- JavaScript Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
issue in the layout
I want the layout to be 100% of the page but apparently there is a small gap at the bottom
is there a way to make the layout 100% of the page unless i enter a rich content in one of the child grids then a scrollbar should appear.
there is a gap in the layout, even tho the parent grid is set to 100vh 100wh.
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 4.5% 95.5%;
grid-template-rows: 7% 89% 4%;
grid-template-areas:
"sidebar header"
"sidebar content"
"footer footer";
}
.header{
grid-area: header;
background-color: #EDEDED;
}
.sidebar{
grid-area: sidebar;
background-color: #EDEDED;
}
.content{
grid-area: content;
background-color: #f7f7f7;
display: grid;
width:100%;
height:100%;
}
.footer{
grid-area: footer;
background-color: green;
}
.img-circle {
width: 70%;
background: #fff;
margin-left: 15%;
z-index: 1000;
position: inherit;
margin-top: 20px;
border: 1px solid rgba(52,73,94,.44);
padding: 4px;
border-radius: 50%;
}
.sidebar{
padding-left: 0;
display: block;
margin-bottom: 0;
list-style: none;
}
.maintenance{
display:grid;
grid-template-rows: 15% 85%;
grid-template-areas:
"maintenance-nav"
"maintenance-info"
}
.maintenance-nav{
grid-area: maintenance-nav;
background-color: ##f7f7f7;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #25aaff;
}
.maintenance-info{
grid-area: maintenance-info;
background-color: blue;
}
.components{
display:grid;
grid-template-columns: 30% 70%;
grid-template-rows: 10% 90%;
grid-template-areas:
"components-name components-nav"
"components-name components-data";
width:100%;
height: 100%;
}
.components-name{
grid-area:components-name;
background-color: red;
}
.components-nav{
grid-area: components-nav;
background-color: blue;
display:flex;
justify-content: space-around;
align-items: center;
background-color: #f7f7f7;
}
.components-data{
grid-area: components-data;
background-color: yellow;
}
.maintenance-nav > div {
display: inline-block;
height: 60px;
background-color: white;
text-align: center;
margin: 30px;
border-radius: 10px;
width: 13%;
font-family: "Helvetica Neue",Roboto,Arial,"Droid Sans",sans-serif;
}
.components-nav-links li {
list-style: none;
display: inline-block;
padding: 0px 20px;
}
.components-nav-links li a{
transition: all 0.3s ease 0s;
}
.components-nav-links li a:hover {
color:#419C99;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
<title></title>
</head>
<body>
<!--Layout grid -->
<div class="grid">
<!--header grid-->
<div class="header">Header</div>
<!--sidebar grid-->
<div class="sidebar">
<!--sidebar logo-->
<img src="{{ url_for('static', filename='images/fleet.png') }}" alt="..." class="img-circle profile_img"></div>
<!--nav list-->
<div>
</div>
<!--contenant grid-->
<div class="content">
<div class="maintenance">
<div class="maintenance-nav">
<div>Components</div>
<div>Worklist</div>
<div>Running Hours</div>
<div>Jobs Report</div>
<div>Cost Estimation</div>
<div>Logs</div>
</div>
<div class="maintenance-info">
<div class=components>
<div class="components-name"></div>
<div class="components-nav">
<nav>
<ul class="components-nav-links">
<li>Component Data</li>
<li>Jobs</li>
<li>Documents</li>
<li>Logs</li>
</ul>
</nav>
</div>
<div class="components-data">Components data</div>
</div>
</div>
</div>
</div>
</div>
<!--footer grid-->
<div class="footer">Footer</div>
</div>
</body>
</html>
Your .footer is outside the .grid element, because you have too many closing </div>'s.
Try this one:
<div class="grid">
<!--header grid-->
<div class="header">Header</div>
<!--sidebar grid-->
<div class="sidebar">
<!--sidebar logo-->
<img src="{{ url_for('static', filename='images/fleet.png') }}" alt="..." class="img-circle profile_img"></div>
<!--nav list-->
<div>
</div>
<!--contenant grid-->
<div class="content">
<div class="maintenance">
<div class="maintenance-nav">
<div>Components</div>
<div>Worklist</div>
<div>Running Hours</div>
<div>Jobs Report</div>
<div>Cost Estimation</div>
<div>Logs</div>
</div>
<div class="maintenance-info">
<div class=components>
<div class="components-name"></div>
<div class="components-nav">
<nav>
<ul class="components-nav-links">
<li>Component Data</li>
<li>Jobs</li>
<li>Documents</li>
<li>Logs</li>
</ul>
</nav>
</div>
<div class="components-data">Components data</div>
</div>
</div>
</div>
</div>
<!--footer grid-->
<div class="footer">Footer</div>
</div>
With this tool you can verify if your html structure is OK:
https://validator.w3.org/#validate_by_input
You have defined the display of the container .grid as grid and also have defined grid-template-areas within the container .grid. But, while writing markups in HTML file, you have put your .footer container outside the .grid parent container.
I have grid section that has a grid-template-column for 3 columns. But this content is loaded dynamically so it has 2 columns sometimes. I am trying to center the columns when there is only 2 columns
I checked the documentation of the grid CSS and tried a lot of different CSS but nothing seems to work as I would like to.
.wrapper {
grid-template-columns: repeat(3,1fr);
display: grid;
align-items: stretch;
}
.items {
display: block;
}
Is this the behavior you were expecting?
More about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
justify-content: center;
}
/* Addition styling */
.parent {
padding: 30px;
background: lightgrey;
opacity: 0.8;
}
.child {
padding: 30px;
text-align: center;
background: black;
margin: 10px;
color: white;
max-width: 300px;
}
<div class="parent">
<div class="child">Column</div>
<div class="child">Column</div>
</div>
<hr>
<div class="parent">
<div class="child">Column</div>
<div class="child">Column</div>
<div class="child">Column</div>
</div>
<hr>
<div class="parent">
<div class="child">Column</div>
<div class="child">Column</div>
<div class="child">Column</div>
<div class="child">Column</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-column-gap: 50px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.grid-container div {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
i want to achieve a responsive image banner look using div like this https://www.prabhukrishna.com/css_image.jpg
on the mobile devices all the images should be aligned vertically.
i have tried many tricks but no luck
<style>
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.column {
flex: 1;
margin: 2px;
padding: 10px;
}
</style>
<section class="columns">
<div class="column">
<img src="image1.jpg" >
</div>
<div class="column">
<img src="image2.jpg" >
</div>
<div class="column">
<img src="image3.jpg" >
</div>
<div class="column">
<img src="image4.jpg" >
</div>
<div class="column">
<img src="image5.jpg" >
</div>
</section>
this will get you started:
<!DOCTYPE html>
<html>
<head>
<style>
.img {
min-height: 150px;
min-width: 150px;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
}
.image1 {grid-area: image1;}
.image2 {grid-area: image2;}
.image3 {grid-area: image3;}
.image4 {grid-area: image4;}
.image5 {grid-area: image5;}
.grid-container {
display: grid;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
#media screen and (max-width: 500px) {
.grid-container {
grid-template-areas:
'image1'
'image2'
'image3'
'image4'
'image5';
}
}
#media screen and (min-width: 500px) {
.grid-container {
grid-template-areas:
'image1 image5 image2'
'image3 image5 image4';
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="img image1"></div>
<div class="img image2"></div>
<div class="img image3"></div>
<div class="img image4"></div>
<div class="img image5"></div>
</div>
</body>
</html>
I recommend you search more about css grid & media queries, they are the hot topics of the css world we are living in.
im not good with mdl lite but i want to create an mdl card that looks exactly as it is on the image below how do i do that?
after reading on documentation this is what i came up with. but it doesn't look good.
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 60px;
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
]1]1
The use of mdl-grid within mdl-card makes sense, but won't give you much flexibility (e.g. the position of the separator/divider). I propose a solution with flex instead.
For the right aligned menu button I have used the mdl-card__menu from the card component. The rest, I leave it to you ;) Bare in mind the example you give does not use the default Roboto font.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
/* height: 50px; */
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
/* Additional css below */
.mdl-card {
min-height: 0;
}
.mdl-card__menu {
color: white;
}
/* .mdl-card__title {
padding: 12px 32px;
align-items: center;
} */
/* .mdl-card__title-text {
font-size: 20px !important;
font-weight: 400;
} */
.card-content {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-cell {
text-align: center;
}
.card-cell h4 {
margin: 8px 0;
font-weight: 400;
}
.card-divider {
display: block;
height: 50px;
width: 1px;
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
</div>
<div class="mdl-card__supporting-text card-content">
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<span class="card-divider"></span>
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.