I have a pretty simple site of 2 buttons that I need to align at the bottom of the site using grid. While justify- works properly, align- doesn't work at all. Could you please help me solve this issue? Thanks a lot in advance!
I've tried setting height to container as well as to .buttons and .next-button, .back-button. I've tried display: flex on .buttons and .next-button, .back-button too and the align- just doesn't work anyway.
Here's my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping cart</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<div class="buttons">
<a href='www.shopping.com' class="back-button">
BACK</a>
<a href='shopping-cart.php' class="next-button">
NEXT</a>
</div>
</div>
</header>
<main>
</main>
<footer>
<?php include "footer.php" ?>
</footer>
</body>
</html>
and here's my CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
}
.container {
width: 75vw;
margin: 0 auto;
}
/******* Header *******/
header {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
background-size: cover;
height: 100vh;
background-attachment: fixed;
color: white;
position: relative;
}
.buttons {
padding: 1vw;
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
justify-self: center;
align-self: end;
}
.next-button, .back-button {
border: 3px dotted rgba(97, 136, 150, 0.959);
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.5);
text-decoration: none;
text-align: center;
color: white;
font-size: 15px;
font-family: Arial;
box-shadow: 12px 7px 12px rgba(128, 128, 128, 0.181);
border-radius: 15px;
background: linear-gradient(rgba(4, 65, 85, 0.2), #12688580);
}
.back-button:hover,
.next-button:hover,
.back-button:active,
.next-button:active {
transition: background 0.5s;
background: #6dc3e063;
}
I added height and flex to your container
.container {
width: 75vw;
margin: 0 auto;
height: 100%;
display: flex;
}
Also updated button class with 100% width.
.buttons {
padding: 1vw;
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
align-self: end;
}
here is codepen https://codepen.io/ignasb/pen/BaPYQbp :-)
Related
I would like my nav to go on row 1/3 and column 2/4 and be horizontal. It should be next to the header (left side) on the same row. For some reasons, it is on a different cell in vertical, and I cannot make it work. I would appreciate your help. Below is what I have. In the beginning of this and not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="ud.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="header-nav">
<header>
<h1>DS</h1>
</header>
<nav>
<ul class="nav">
<li>Home</li>
<li>AT</li>
<li>Contact</li>
<li>Reservation</li>
</ul>
</nav>
</div>
<div id="photo">
</div>
</div>
Here is the CSS:
* {
box-sizing: border-box;
}
.nav
{
text-align: center;
display: inline-block;
height: 100%;
line-height: 4rem;
display: flex;
justify-content: center;
}
.header-nav
{
display: flex;
flex-direction: row;
}
h1
{
overflow: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li
{
float: left;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
border-radius: 15px;
font-family: "Google Sans",Roboto,Arial,sans-serif;
}
body
{
font-family: "Google Sans",Roboto,Arial,sans-serif;
}
li a
{
color: black;
display: block;
padding: 8px;
background-color: white;
text-decoration: none;
border-radius: 25px;
}
#wrapper
{
display: grid;
grid-template:
"title nav nav"
"future future future"
width: 90%;
margin: auto;
grid-template-columns: 100px 1000px 80px;
grid-template-rows: 70px 1000px 1fr;
box-shadow: 3px 3px 3px darkblue;
}
h1
{ grid-area: title;
grid-row: 1/2 ; grid-column: 1/1
}
nav
{ grid-area: nav;
grid-row: 1/2; grid-column: 2/3;
}
I'm trying to learn flexbox and I am struggling with centering the text in a div in the header. I have an image on the left and then a dif with a text_box and I'm trying to center the h1 using justify-content: center but no matter what I put there it will not mvoe the text. The only way I can get the text to center is by using margin: 0 auto; but that seems to be more to the right as well.
Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1em;
line-height: 1.7;
color: #777;
padding: 20px;
}
.header {
display: flex;
flex-wrap: wrap;
height: 60vh;
background-image: linear-gradient(
to right bottom,
rgba(12, 186, 186, 0.5),
rgba(56, 0, 54, 0.5)),
url(../img/code.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 55vh, 0 100%);
/* Defines how to distribute the empty space between child elements */
color: #fff;
padding: 40px;
}
.header_img img {
display: flex;
width: 100%;
border-radius: 82%;
padding: 0;
}
.header_text {
justify-content: center
}
hr {
display: flex;
}
#media screen and (max-width: 576px) {
.text_box h1 {
font-size: 1.4em;
}
.text_box h2 {
font-size: 1.2em;
}
.header {
justify-content: center;
}
.header_img {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header class="header">
<div class="header_img">
<img src="assets/img/stephen_moore_london_2012.jpg" alt="">
</div>
<<div class="header_text">
<h1>My Name</h1>
<hr>
<h2>Something Here</h2>
</div>
</header>
</body>
</html>
Update the header_text class:
.header_text {
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
You can center the text for a given element. Here I removed all the excess just to show the text - I added borders for clarity on what is where and to show the content can get out with what you have
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1em;
color: #777;
padding: 20px;
}
.header {
display: flex;
justify-items: center;
height: 60vh;
padding: 2rem;
border: 1px solid blue;
}
.header-text {
display: flex;
flex-direction: column;
justify-items: center;
border: 1px solid lime;
width: 100%;
}
.header-text h1 {
text-align: center;
}
<body>
<header class="header">
<div class="header_img">
<img src="assets/img/stephen_moore_london_2012.jpg" alt="I do not exist">
</div>
<div class="header-text">
<h1>My Name</h1>
<hr>
<h2>Something Here</h2>
</div>
</header>
</body>
</html>
Everything is pretty much ready, the only issue I have is that bottom circle does not want to hide beyond body borders, even though the property is set to hidden. Could anyone take a look at the code and explain it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
<title>Profile card component</title>
</head>
<body>
<div class="gradient-top">
</div>
<div class="gradient-bottom">
</div>
<div class="container">
<!-- BACKGROUND THROUGH CSS -->
<div class="personal">
<div class="background">
<img src="images/bg-pattern-card.svg" alt="">
</div>
<img class ="victor" src="images/image-victor.jpg" alt="personal photo">
<h1>Victor Crest <span>26</span> </h1>
<h2>London</h2>
</div>
<div class="properties">
<div class="followers">
80K
<span class="property">Followers</span>
</div>
<div class="likes">
803K
<span class="property">Likes</span>
</div>
<div class="photos">
1.4K
<span class="property">Photos</span>
</div>
</div>
</div>
</body>
</html>
:root {
font-size: 62.5%;
font-family: "Kumbh Sans", sans-serif;
box-sizing: border-box;
}
body {
background-color: #19a1ae;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
}
/* MAIN CARD SECTION */
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
border-radius: 20px;
margin-right: 2.5rem;
margin-left: 2.5rem;
box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.1),
-5px -5px 20px 10px rgba(0, 0, 0, 0.1);
}
.personal {
background-color: #ffffff;
}
.personal .victor {
display: inline;
margin-top: -55px;
border: 6px solid #ffffff;
border-radius: 50%;
}
h1 {
color: #2e3349;
}
h1 span {
font-weight: 400;
color: #6b7082;
}
h2 {
font-size: 1.4rem;
font-weight: 400;
color: #6b7082;
padding-bottom: 1em;
}
/* STAT SECTION */
.properties {
display: flex;
justify-content: space-around;
align-items: center;
padding: 1.3em 1em;
background-color: #ffffff;
width: 100%;
font-size: 1.8rem;
font-weight: bold;
color: #2e3349;
border-top: 1px solid #e8e9ec;
}
.property {
display: flex;
flex-direction: column;
color: #6b7082;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.15em;
padding-top: 0.8em;
}
/* CIRCLES */
.gradient-top {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-top.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
top: -35%;
left: -31.5%;
}
.gradient-bottom {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-bottom.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
bottom: -50%;
right: -31%;
}
}
/* the bottom one causes the problem fsr*/
Repo link: https://github.com/ViyanMd/personal-card
Pages link: https://viyanmd.github.io/personal-card/
The issue was fixed by wrapping the whole content in another div, applying to it properties, that were applied to body before. For some reason the child element started to behave differently and the issue was solved.
I've been all over this site for some solutions to my issue but nothing has seemed to work.
Referring to This JSFiddle I'm trying to get internal drop shadows surrounding the top and bottom of the dark grey div. I've tried changing from flex to relative positions, z-index, order, various overflow options and drop shadow filters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Bespoke">
</head>
<body>
<div class="grid">
<!-------- Row 1 ---------->
<header>
</header>
<!-------- Row 2 ---------->
<article>
</article>
<!-------- Row 3 ---------->
<blank>
</blank>
<!-------- Row 4 ---------->
<subtitle>
</subtitle>
<!-------- Row 5 ---------->
<blank2 class>
</blank2>
<!-------- Row 5 ---------->
<footer>
</footer>
</div>
</body>
</html>
.grid {
display: grid;
grid-template-columns:auto;
grid-gap: 0em;
width: 100vw;
height: 10vw;
}
}
#media all and (max-width: 100vw) {
aside,
article {
}
}
body {
margin: 0 auto;
max-width: 100vw;
background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
}
header {
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
text-align: center;
background: rgba(175, 165, 255, 0);
}
article {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
text-align: center;
background: rgba(0, 0, 0, 0);
}
blank {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
text-align: center;
background: rgba(205, 225, 105, 0);
box-shadow(10px 10px 30px #000000);
z-index: 10;
}
subtitle {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
text-align: center;
background-color: #1e1e1e;
font-size: max(7vw, 20px);
box-shadow(-10px -10px 30px #000000);
z-index: 9;
}
blank2 {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
text-align: center;
background-color: #fffff7;
z-index: 8;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
align-items: center;
justify-content: center;
height: 7vh;
text-align: center;
background-color: #fffff7;
}
Your issue is that you had the syntax of the box-shadow CSS wrong
You had it like: box-shadow(10px 10px 30px #000000);
Where it needs to be: box-shadow: 10px 10px 30px #000000;
If CSS runs into properties it doesn't understand, then it just silently ignores it and considers it an invalid property. It doesn't throw an error of any kind.
In Chrome's dev tools, this is what an invalid property looks like: There is a warning sign that indicates that it's an unknown property name.
The syntax highlighting on the jsfiddle also shows the issue as it isn't showing the correct colors
Change box-shadow(-10px -10px 30px #000000); -> box-shadow: -10px -10px 30px #000000;
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer