I am not able to align center the following divs on the full page width:
header
content
footer
But it does not work! Whats needs to be changed within my CSS to get it working?
body {
margin:0;
padding:0;
}
#wrapper {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
}
#hero-wrapper {
background-image: url('https://unsplash.it/1500?random');
background-size: cover;
background-position: center;
width: 100vw;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
color:#ffffff;
}
#hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero-text{
font-family:'Roboto';
font-weight:900;
font-size:2em;
text-align:center;
}
#hero-footnote {
font-family: 'Cabin', sans-serif;
font-size: 12px;
padding: 5px 5px 10px 5px;
}
#content {
width: 1024px;
background-color:green;
}
#footer {
font-family: 'Cabin', sans-serif;
weight: 400;
background-color: #ffffff;
/* position: fixed; */
bottom: 0;
left: 0;
width: 100%;
font-size: 0.685em;
color: #1a1717;
padding-bottom: 5px;
}
#footer-info {
width: 1024px;
margin: auto;
padding-left: 3px;
padding-right: 3px;
text-align: left;
line-height: 42px;
}
span#footer-social-icons {
}
span#copyright-info {
font-family: 'Cabin', sans-serif;
weight: 400;
padding-left:10px;
}
span#contact-link {
font-family: 'Source Sans Pro', sans-serif;
weight: 200;
padding-left:10px;
}
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght#200&family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<div id="wrapper">
<div id="header">header</div>
<div id="hero-wrapper">
<div id="hero">
<div id="hero-text">
<span id="hero-header">sell the product</span><br />
<span id="hero-sub">On this page for less</span>
</div>
</div>
<div id="hero-footnote">© Copyright Text</div>
</div>
<div id="content">
<!-- Content-Loop -->
<div class="article">
Here come the Article
</div>
</div>
<div id="footer">
<div id="footer-info">
<span id="footer-social-icons"></span> <span id="copyright-info">Made with love by Y.</span> <span id="contact-link">Contact</span>
</div>
</div>
</div>
You can add align-items: center; to #wrapper.
Normally if you would have flex-direction: row; centering things would be justify-content: center; but as column change the axis so does the alignment properties. They kinda "go with the axis".
One thing though, I would strongly suggest that you don't style with id, use classes for that.
body {
margin:0;
padding:0;
}
#wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#header {
height: 50px;
}
#hero-wrapper {
background-image: url('https://unsplash.it/1500?random');
background-size: cover;
background-position: center;
width: 100vw;
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
color:#ffffff;
}
#hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#hero-text{
font-family:'Roboto';
font-weight:900;
font-size:2em;
text-align:center;
}
#hero-footnote {
font-family: 'Cabin', sans-serif;
font-size: 12px;
padding: 5px 5px 10px 5px;
}
#content {
width: 1024px;
background-color:green;
}
#footer {
font-family: 'Cabin', sans-serif;
weight: 400;
background-color: #ffffff;
/* position: fixed; */
bottom: 0;
left: 0;
width: 100%;
font-size: 0.685em;
color: #1a1717;
padding-bottom: 5px;
}
#footer-info {
width: 1024px;
margin: auto;
padding-left: 3px;
padding-right: 3px;
text-align: left;
line-height: 42px;
}
span#footer-social-icons {
}
span#copyright-info {
font-family: 'Cabin', sans-serif;
weight: 400;
padding-left:10px;
}
span#contact-link {
font-family: 'Source Sans Pro', sans-serif;
weight: 200;
padding-left:10px;
}
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Source+Sans+Pro:wght#200&family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;900&display=swap" rel="stylesheet">
<div id="wrapper">
<div id="header">header</div>
<div id="hero-wrapper">
<div id="hero">
<div id="hero-text">
<span id="hero-header">sell the product</span><br />
<span id="hero-sub">On this page for less</span>
</div>
</div>
<div id="hero-footnote">© Copyright Text</div>
</div>
<div id="content">
<!-- Content-Loop -->
<div class="article">
Here come the Article
</div>
</div>
<div id="footer">
<div id="footer-info">
<span id="footer-social-icons"></span> <span id="copyright-info">Made with love by Y.</span> <span id="contact-link">Contact</span>
</div>
</div>
</div>
If you just want to center the text, use text-align: center and the parts?
Or if you are looking to do more centered-content, maybe make your #header, #content, and #footer the following:
display: flex;
flex-direction: column;
align-items: center;
Basically, flex boxes within flex boxes.
Related
I want to place the "Page Unfound" text underneath the 404 text so that they stack sort of on top of one and other. Thanks for the help !
Here is the code
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 95vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
flex-wrap: wrap;
color: #D32F2F;
text-align: center;
}
.bigtext {
font-size: 96px;
}
.smalltext {
font-size: 24px;
}
</style>
</head>
<body>
<div class="shell">
<div class="bigtext">404</div>
<div class="smalltext">Page Unfound</div>
</div>
</body>
</html>
All you need to change is flex-direction from row to column
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 95vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5px;
color: #D32F2F;
text-align: center;
}
.bigtext {
font-size: 96px;
}
.smalltext {
font-size: 24px;
}
</style>
</head>
<body>
<div class="shell">
<div class="bigtext">404</div>
<div class="smalltext">Page Unfound</div>
</div>
</body>
</html>
Since the flex container aligns its immediate children in a line, all you need is to make the elements into 1 element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 95vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
flex-wrap: wrap;
color: #D32F2F;
text-align: center;
}
.bigtext {
font-size: 96px;
}
.smalltext {
font-size: 24px;
}
</style>
</head>
<body>
<div class="shell">
<span>
<div class="bigtext">404</div>
<div class="smalltext">Page Unfound</div>
</span>
</div>
</body>
</html>
My background image won't show up in the div I want to display in. However, it shows up if I put it in other elements. For example, I put it in the body element and it showed up just fine, but it won't display in the div I want it to. Can you check my code and see what I'm doing wrong. I double checked my file path and also the file type, and it's all fine. So, I'm not being able to figure out what I'm doing wrong.
HTML:
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
</body>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('logo.jpg');
}
This is because you are trying set background image in an empty element, which has 0 height.
Set specific width/height of the element.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj');
height: 10em;
background-size: contain;
background-repeat: no-repeat;
}
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
Your div has no content. Either give some content or if that does not agree with your current design, give explicit height and width.
.image{
width: 200px;
height: 200px;
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
.image2{
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
<div class="image"></div>
<div class="image2"></div>
You need to add width, height, and background-size properties to the .image.
body {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
min-height: 100vh;
}
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px) {
.container-flex {
flex-direction: row;
}
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin-left: 2em;
}
nav a {
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1 {
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px) {
nav ul {
flex-direction: column;
}
nav li {
margin: .5em 0;
}
}
.container:nth-child(2){
height: 250px; /* set the height here */
}
main{
width: 100%;
height: 100%;
}
.image {
height: 30%;
width: 30%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Disk_pack1.svg/1200px-Disk_pack1.svg.png');
background-size: cover;
}
<body>
<header>
<div class="container container-flex">
<div class="title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class="container container-flex">
<main role="main">
<div class="image">
</div>
</main>
</div>
</body>
Edit: You need to set the height on the second .container class. Because of no height, the relative units didn't work. Also, you need to set the height and width on parent (main) element of .image.
in your code if you setting an image in div tag it is should have a height and weight. This is another way to add images in your application with responsive.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image img{
width: 100%;
height: auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title Goes Here</title>
<meta name="description" content="Description Goes Here">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" alt="Smiley face">
</div>
</main>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
As mentioned in answers by other users, your div element is empty and will sit on your page with effectively height: 0px; and width: 0px; properties.
To combat this, you should add a width property to your .image div in your stylesheets.
You can either then control the height of the image div with the height property, or alternatively you could use padding-bottom to give a more responsive twist to your styling, since padding-bottom: x% is a percentage of the element's width.
For example, adding:
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 100%;
width: 100%;
}
would create a square image that will stay responsively square as the page width, and therefore the width of the div.iamge element shrinks. The padding value can be played around with to get the right height for the element that you desire.
UPDATE
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
background-color: red;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.image-wrapper {
width: 75%;
}
.image {
background-color: green;
height: 0;
padding-bottom: 100%;
}
.container {
color: white;
padding-bottom: 16px;
}
.center-image {
margin: 0 auto;
}
<body>
<header>
</header>
<div class="container">
container
<main role="main">
<div class="image-wrapper center-image">
<div class="image">
<span>image</span>
</div>
</div>
</main>
</div>
</body>
I try to make a chat-app, now i'm trying to implement the cheats and when user click on one chat, styles must change and remain until the user focus it's gonna to another chat
In my example let's assume someone clicked on User 2. The chat changed style and now have the style that should have when someone open that chat. How can i make the style to stay like that until someone open another chat? I didn't find any css propriety or some react tricks.
.userChatBubbles {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5%;
width: 100%;
height: 100%;
}
.allOfMessage {
width: 100%;
height: 20%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 13%;
margin-bottom: 1px;
}
.messageBubleNEWMSG {
display: flex;
flex-direction: row;
align-items: center;
width: 90%;
height: 80%;
font-size: 15px;
background: #1d1335;
opacity: 1;
border-radius: 2%;
padding-left: 4%;
margin-right: 10%;
font-family: 'Roboto', sans-serif;
}
.messageBuble {
display: flex;
flex-direction: row;
align-items: center;
width: 90%;
height: 80%;
font-family: 'Roboto', sans-serif;
font-size: 15px;
padding-left: 4%;
margin-right: 10%;
}
.photo {
background: green;
width: 45px;
height: 45px;
margin-top: 2%;
border-radius: 10%;
margin-right: 6%;
}
.messageBubleNEWMSG.personNameAndMsg.personName {
color: green !important;
margin-top: 200%;
}
.messageBuble .personNameAndMsg h3 {
color: #c2b4da;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 15px;
}
.messageBuble .personNameAndMsg p {
color: #514b64;
margin-top: -8%;
/* margin-top: 1%; */
font-family: 'Roboto', sans-serif;
font-weight: 200;
}
.messageBubleNEWMSG .personNameAndMsg h3 {
color: #e1dbed;
font-family: 'Roboto', sans-serif;
font-weight: 200;
font-size: 15px;
}
.messageBubleNEWMSG .personNameAndMsg p {
color: #736f83;
margin-top: -8%;
font-family: 'Roboto', sans-serif;
font-weight: 500;
/* margin-top: 1%; */
}
.messageTime {
margin-left: auto;
color: #6e6d73;
}
<div class='userChatBubbles'>
<div class='allOfMessage'>
<div class='messageBuble'>
<div class='photo'></div>
<div class='personNameAndMsg'>
<h3>User</h3>
<p> When can we hangout?</p>
</div>
<div class='messageTime'>6m</div>
</div>
</div>
<div class='allOfMessage'>
<div class='messageBubleNEWMSG'>
<div class='photo'></div>
<div class='personNameAndMsg'>
<h3>User 2</h3>
<p> When can we hang out?</p>
</div>
<div class='messageTime'>6m</div>
</div>
</div>
<div class='allOfMessage'>
<div class='messageBuble'>
<div class='photo'></div>
<div class='personNameAndMsg'>
<h3>User 3</h3>
<p> When can we hangout?</p>
</div>
<div class='messageTime'>6m</div>
</div>
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
Hi,
I want the logo 'Abyk Deco' to stay at the top of the page, but it's now centered along with the two heading text. How can I align this at the top using flexbox? I've tried this code.
<body>
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
The CSS:
.banner{
height: 100%;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo{
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
align-items: flex-start;
justify-content: center;
}
.logo a{
color: #fff;
}
#red{
color: red;
}
.heading{
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.heading h1{
font-size: 4.5em;
}
.heading h4{
font-size: 2em;
}
How can I align the logo to the top while the heading texts stay at the center? I prefer to use flexbox to solve this problem. Thank You.
.container{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
background-color: gray;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
<div class="container">
<div class="logo">
<p>Text something </p>
<p>Something else </p>
<p>What else?</p>
</div>
</div>
Try to use this.
The main trick here to be able put the logo at the top and heading in the center of the viewport, is to use the ::after pseudo element to match the logo and then add this rule and make them equal high by setting flex-grow to 1 and flex-basis to 0
.logo, .heading, .banner::after {
content: ''; /* for the pseudo to render */
flex: 1 1 0; /* grow/shrink equal based on zero content */
}
Stack snippet
html, body {
height: 100%;
margin: 0;
}
.banner {
height: 100%;
background-image: url(http://placehold.it/300x100/555);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
}
.logo a {
color: #fff;
}
#red {
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.heading h1 {
font-size: 4.5em;
margin: 0; /* remove default margin */
}
.heading h4 {
font-size: 2em;
margin: 0; /* remove default margin */
}
.logo, .heading, .banner::after {
content: ''; /* for the pseudo to render */
flex: 1 1 0; /* grow/shrink equal based on zero content */
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco</span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
If the heading should be in the center of the space left (between the end of the logo and page bottom), use auto margin on the heading
html, body {
height: 100%;
margin: 0;
}
.banner {
height: 100%;
background-image: url(http://placehold.it/300x100/555);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
}
.logo h1 {
margin-bottom: 0; /* remove default margin */
}
.logo a {
color: #fff;
}
#red {
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto 0;
}
.heading h1 {
font-size: 4.5em;
margin: 0; /* remove default margin */
}
.heading h4 {
font-size: 2em;
margin: 0; /* remove default margin */
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco</span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
Change align-items to flex-start
.banner{
height: 100%;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
Remove the following styles from banner class would do.
justify-content: center;
align-items: center;
Add the following styles to logo class
align-items: center;
justify-content: center;
display: flex;
body {
margin: 0
}
.banner {
height: 100%;
background-image: url('https://images.designtrends.com/wp-content/uploads/2015/11/06084012/Dark-Brown-Bricks-Backgroud.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
align-items: center;
justify-content: center;
display: flex;
}
.logo a {
color: #fff;
}
#red {
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.heading h1 {
font-size: 4.5em;
}
.heading h4 {
font-size: 2em;
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
Try to add flex-grow: 1; to the .heading, align-self: center; to the .logo and remove margin-top from the .logo H1 (optional)
HTML:
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
CSS:
.banner{
height: 100%;
min-height: 100vh;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
}
.logo {
color: #fff;
font-size: 2em;
font-family: 'Oswald', sans-serif;
align-self: center; /*added*/
}
.logo a{
color: #fff;
}
.logo H1 { /*added*/
margin-top: 0;
}
#red{
color: red;
}
.heading {
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1; /*added*/
}
.heading h1{
font-size: 4.5em;
}
.heading h4{
font-size: 2em;
}
Code exmaple on JSFiddle
The trick is to add margin: 0 auto auto auto; to both your .logo and .heading
p.s. I have minimize the font size so that you can see the preview properly in the code snippet or just check out the preview on full screen
html{
height:100%;
}
body{
background:grey;
height:100%;
}
.banner{
height: 100%;
background-image: url(../img/1.jpeg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo{
color: #fff;
font-size: .9em;
font-family: 'Oswald', sans-serif;
margin: 0 auto auto auto;
}
.logo a{
color: #fff;
}
#red{
color: red;
}
.heading{
font-family: 'PT Sans', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 auto auto auto;
}
.heading h1{
font-size: 2em;
margin: 0;
}
.heading h4{
font-size: 1.3em;
}
.logo h1 {
margin: 0;
}
.heading h1 {
margin-bottom: 0;
}
<div class="banner">
<div class="logo">
<h1>Abyk<span id="red">Deco<span></h1>
</div>
<div class="heading">
<h1>ABYK DECO</h1>
<h4>We make your dream home come true!</h4>
</div>
</div>
Print screen image:
My problem is that I have two div containers and inside many div windows. How do I make the margins between objects inside different containers zero? (See picture).
<style type="text/css" media="screen">
html, body { height:100%; background-color: #666666;}
body { margin:0; padding:0; overflow:hidden; }
#ContainerBlue {
padding-top:100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 150px;
background-color:#00F;
}
#ContainerGreen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 250px;
background-color:#090;
}
.div1 {
width: 300px;
margin: 5px;
text-align: center;
background-color:#09F;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.div2 {
width: 300px;
margin: 5px;
text-align: center;
background-color:#F09;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
}
</style>
<div id="ContainerBlue">
<div class="div1" id="yan1">
<p>div1</p>
</div>
<div class="div2" id="yan2">
<p>div2</p>
</div>
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">Container Blue</p>
</div>
</div>
<div id="ContainerGreen">
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">Container Green</p>
<div class="div1" id="dik1">
<p>div1</p>
</div>
<div class="div2" id="dik2">
<p>div2</p>
</div>
</div>
You have to study Flexbox, I suggest reading this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Basicaly the blue container has to be flex-direction: row; justify-content: center; align-items: flex-end;
and the green flex-direction: column; justify-content: flex-start; align-items: center;
html,
body {
height: 100%;
background-color: #666666;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#ContainerBlue {
padding-top: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
height: 150px;
background-color: #00F;
}
#ContainerGreen {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 250px;
background-color: #090;
}
.div1 {
width: 300px;
margin: 5px;
text-align: center;
background-color: #09F;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.div2 {
width: 300px;
margin: 5px;
text-align: center;
background-color: #F09;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
<div id="ContainerBlue">
<div class="div1" id="yan1">
<p>div1</p>
</div>
<div class="div2" id="yan2">
<p>div2</p>
</div>
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">Container Blue</p>
</div>
<div id="ContainerGreen">
<div class="div1" id="dik1">
<p>div1</p>
</div>
<div class="div2" id="dik2">
<p>div2</p>
</div>
<p align="center" style="color:#FFF; font: bold 18px/30px Tahoma, serif;">
Container Green</p>
</div>