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;
Related
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 :-)
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.
how can I change the picture and center it against the flexbox?
I tried to add the width and height but to strangely move and do not see png.
I also care about responsive
Thank you for your help
CSS CODE
.container{
width: 100%;
height: 50vh;
border-top: 4px solid rgb(134, 17, 212);
display: flex;
justify-content: space-evenly;
padding-top: 15px;
background: rgb(20, 20, 19);
}
.contact, .projects, .me{
background: rgb(20, 20, 19);
width: 100%;
display: flex;
color: white;
justify-content: space-evenly;
font-size: 1.3em;
}
.contact {
background: url('cntct.png') top center no-repeat;
width:
}
HTML CODE
<div class="container">
<div class="contact">Kontakt</div>
<div class="projects">Projekty</div>
<div class="me">O mnie</div>
</div>
</div>
Can you add a picture of what you want it to look like? Without that, I can suggest adding background-size: 50px, auto, contain; to size the background image. Here's an example using a sample contact image:
.container{
width: 100%;
height: 50vh;
border-top: 4px solid rgb(134, 17, 212);
display: flex;
justify-content: space-evenly;
padding-top: 15px;
background: rgb(20, 20, 19);
}
.contact, .projects, .me{
background: rgb(20, 20, 19);
width: 100%;
display: flex;
color: white;
justify-content: space-evenly;
font-size: 1.3em;
}
.contact {
background: url('https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454732_960_720.png') top center no-repeat;
background-size: 50px, auto, contain;
}
<div class="container">
<div class="contact">Kontakt</div>
<div class="projects">Projekty</div>
<div class="me">O mnie</div>
</div>
</div>
You can also position it anywhere in the flexbox: background: url('cntct.png') 50% 25px no-repeat; for instance:
I'm a React beginnerCan you explain me how to place a .herogroup (composed by h1, p and a button) in the middle and 20px far away from the bottom of a background (belonging to .Hero)?
<div>
<div className="Hero">
<div className="HeroGroup">
<h1>ABC</h1>
<p>ABC</p>
<Link to="ABC">ABC</Link>
</div>
</div>
CSS
.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;}
.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 150px 50px;
text-align: center;}
I have used css flex. Which is more convenient to achieve your case than using position absolute.
.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 20px 0px;
display: flex;
/* flex-wrap: wrap; */
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div>
<div class="Hero">
<div class="HeroGroup">
<h1>ABC</h1>
<p>ABC</p>
<Link to="ABC">ABC</Link>
</div>
</div>
In your .HeroGroup class do this
.HeroGroup {
max-width: 500px;
padding: 150px 50px;
margin: 0 auto;
text-align: center;
position: absolute;
bottom: -20px;
}
I'm trying to display a list of items in a single column. The list is long so I want it to scroll if they all don't fit.
On all browsers right and left margin not appearing
On chrome: The issue is that if the window becomes smaller, the top items start to disappear and hide as the window shrinks. Also first item top margin missing.
On IE11 sometimes the rows doesn't take 100% but shrinks to the content width. If I resize the IE window it displays properly.
Edit:
After removing justify-content: center; it solved the vertical issue on chrome, but suddenly no bottom margin appears on IE11
This is the CSS
body {
height: 100%;
width: 100%;
margin: 0pt;
padding: 0pt;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #e6e6fa;
}
div.list {
max-height: 80%;
width: 60%;
margin: 0pt;
padding: 0pt;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
overflow-y: auto;
flex: 0 1 auto;
background-color: red;
justify-content: center;
align-items: center;
}
div.list .row {
width: 100%;
margin: 4pt 12pt 4pt 12pt;
padding: 0pt;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
flex: 0 0 auto;
box-shadow: 0 0 4px #000000;
background-color: #ffffff;
}
div.list .row .content {
width: 100%;
margin: 0pt;
padding: 0pt;
flex: 0 0 auto;
direction: rtl;
text-align: right;
}
This is the HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="list">
<div class="row">
<div class="content" style="color:#2b8ACA">title</div>
<div class="content">description</div>
<div class="content" style="color:#BABABA">date</div>
</div>
</div>
</body>
</html>
Can anyone explain what I'm doing wrong?
Thanks.