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>
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 :-)
can anyone help me with how can I center my hamburger Icon on my sidebar? currently, when I decrease the sidebar width it's not centered at all. Can anyone help me how to accomplish it? I've also tried using justify-content: center on the main class however still not working.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}
<!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="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<i class="bx bx-menu"></i>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>
You can use like that
<div style="
display: flex;
justify-content: space-around;
">...CONTENT...</div>
I edited your code also.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}
<!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="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<div style="display:flex; justify-content: space-around;"><i class="bx bx-menu"></i></div>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>
EDIT : https://codepen.io/agokselb/pen/eYrYBMP
I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.
https://gbears96.github.io/bigStart/
Here's the code:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<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>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fff;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<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>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Reference from w3schools.
I think it is very important to add to #Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.
So setting your HTML element background-color to
html {
:
background-color: #fffcf6;
}
does not then set the body and all other enclosing elements to this color, they will all remain transparent.
The way to solve your problem is to change the value of the header background-color; as #Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fffcf6;
}
Here are some useful references from developer.mozilla and w3schools about the background-color property.
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.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm working on building a responsive website using CSS and flexbox and have run into issues with my #media query. The media query is supposed to produce the changes when the min-width value reaches 992 px. (i.e the text should move to the right of the image). I looked at it multiple times and tried running it on multiple browsers, but still can't seem to figure things out.
Any help would be much appreciated.
//main.css
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i');
* {
margin=0;
padding=0;
box-sizing: border-box;
}
body {
font-family: 'Roboto Mono', monospace;
}
:root {
--light: #fff;
--dark: #181b24;
--grey: #899495;
--orange: #fc5130;
--SectionGrey: #f2f2f2;
--SectionWhite: #fff;
}
/* nav*/
.nav {
background: var(--light);
}
/*end of nav*/
/*header*/
.header {
min-height: 100vh;
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./img/header-bcg.jpeg)center/cover fixed no-repeat;
flex-direction: column;
}
/*end of header*/
/*banner*/
.banner {
/* as a flex child*/
flex: 1 0 auto;
/*as a flex parent*/
display: flex;
justify-content: center;
align-items: flex-end;
color: var(--dark);
text-align: center;
padding-bottom: 4rem;
font-weight: 700;
}
.banner__title {
font-size: 4em;
letter-spacing: 0.15rem;
margin-bottom: 0.5 rem;
font-style: italic;
text-transform: capitalize;
}
.banner__jobs {
letter-spacing: 0.15rem;
text-transform: capitalize;
font-size: 1.5rem;
color: var(--light);
}
/*end of banner*/
/*about section*/
.about {
padding: 2rem 0;
background: var(--SectionWhite);
}
.about__center {
max-width: 90vw;
margin: 2rem auto;
}
.about-img-photo {
margin: 3rem 0;
position: relative;
}
.about-img__photo {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.about-img:before {
content="";
background: var(--grey);
width: 100%;
height: 100%;
position: absolute;
bottom: -10px;
left: -10px;
}
.about-info {
margin: 3rem 0;
}
.about-info__title {
font-size: 3rem;
text-transform: capitalize;
letter-spacing: 0.5rem;
background: url('./img/title-bcg.svg')no-repeat;
}
.about-info__text {
color: var(--grey);
line-height: 1.5;
font-size: 1.2rem;
margin: 3rem 0;
}
.about-info__single-link {
display: inline-block;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1.5rem;
letter-spacing: 0.2rem;
text-transform: capitalize;
border: 3px solid var(--dark);
transition: all 1s linear;
margin-right: 1rem;
}
.dark-btn {
background: var(--dark);
color: var(--light);
}
.dark-btn:hover {
background: var(--light);
color: var(--dark);
}
.light-btn {
color: var(--dark);
}
.light-btn:hover {
background: var(--dark);
color: var(--light);
}
#media screen and(min-width:992px) {
.about__center {
display: flex;
justify-content: space-between;
}
.about-info,
.about-img {
flex: 0 0 calc(50% - 1rem);
}
.about-info {
display: flex;
align-items: flex-end;
}
}
/*end of about section*/
//index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<!--main css-->
<link rel="stylesheet" href="main.css">
<!--font awewsome-->
<script src="all.js"></script>
</head>
<body>
<header class="header">
<!--first child-->
<nav class="nav"></nav>
<!--second child-->
<section class="banner">
<!--banner container-->
<div class="banner__container">
<h1 class="banner__title">I'm a clever techie</h1>
<h1 class="banner__jobs">developer<span><i class="fas fa-angle-double-right"></i></span>
designer
<span><i class="fas fa-angle-double-right"></i></span>
photographer</h1>
</div>
</section>
</header>
<!--end header-->
<!--about section-->
<section class="about"></section>
<div class="about__center">
<article class="about-img">
<img src="img/header-bcg.jpeg" alt="" class="about-img__photo">
</article>
<article class="about-info">
<div class="about-info__container">
<h1 class="about-info__title">about me</h1>
<p class="about-info__text">hah ahdh hqdh hqdhw hqdh hqfh hqfh hwfhdvh hwfdh whfb</p>
<div class="about-info__links">
hire me
download CV
</div>
</div>
</article>
</div>
<!--end of about section-->
<script src="script.js"></script>
</body>
</html>
Screenshot before expansion
After expansion of browser window
Expected output
There is no space between 'and' and bracket '(' and that is the reason it is breaking the css. Put a space as shown below, and it should work with your own code:
Previously #media screen and(min-width:992px) {
Corrected #media screen and (min-width:992px) {
I have checked your code and I have made some changes:
I used just '#media' instead of '#media screen and...'
I used 'max-width' instead of 'min-width'.
Hope it helps!
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i');
* {
margin=0;
padding=0;
box-sizing: border-box;
}
body {
font-family: 'Roboto Mono', monospace;
}
:root {
--light: #fff;
--dark: #181b24;
--grey: #899495;
--orange: #fc5130;
--SectionGrey: #f2f2f2;
--SectionWhite: #fff;
}
/* nav*/
.nav {
background: var(--light);
}
/*end of nav*/
/*header*/
.header {
min-height: 100vh;
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('https://killaexpeditions.com/wp-content/uploads/2018/03/inca-trail-machu-picchu-header.jpg')center/cover fixed no-repeat;
flex-direction: column;
}
/*end of header*/
/*banner*/
.banner {
/* as a flex child*/
flex: 1 0 auto;
/*as a flex parent*/
display: flex;
justify-content: center;
align-items: flex-end;
color: var(--dark);
text-align: center;
padding-bottom: 4rem;
font-weight: 700;
}
.banner__title {
font-size: 4em;
letter-spacing: 0.15rem;
margin-bottom: 0.5 rem;
font-style: italic;
text-transform: capitalize;
}
.banner__jobs {
letter-spacing: 0.15rem;
text-transform: capitalize;
font-size: 1.5rem;
color: var(--light);
}
/*end of banner*/
/*about section*/
.about {
padding: 2rem 0;
background: var(--SectionWhite);
}
.about__center {
max-width: 90vw;
margin: 2rem auto;
}
.about-img-photo {
margin: 3rem 0;
position: relative;
}
.about-img__photo {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.about-img:before {
content="";
background: var(--grey);
width: 100%;
height: 100%;
position: absolute;
bottom: -10px;
left: -10px;
}
.about-info {
margin: 3rem 0;
}
.about-info__title {
font-size: 3rem;
text-transform: capitalize;
letter-spacing: 0.5rem;
background: url('./img/title-bcg.svg')no-repeat;
}
.about-info__text {
color: var(--grey);
line-height: 1.5;
font-size: 1.2rem;
margin: 3rem 0;
}
.about-info__single-link {
display: inline-block;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1.5rem;
letter-spacing: 0.2rem;
text-transform: capitalize;
border: 3px solid var(--dark);
transition: all 1s linear;
margin-right: 1rem;
}
.dark-btn {
background: var(--dark);
color: var(--light);
}
.dark-btn:hover {
background: var(--light);
color: var(--dark);
}
.light-btn {
color: var(--dark);
}
.light-btn:hover {
background: var(--dark);
color: var(--light);
}
#media(max-width:992px) {
.about__center {
display: flex;
justify-content: space-between;
}
.about-info,
.about-img {
flex: 0 0 calc(50% - 1rem);
}
.about-info {
display: flex;
align-items: flex-end;
}
}
/*end of about section*/
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<!--main css-->
<link rel="stylesheet" href="main.css">
<!--font awewsome-->
<script src="all.js"></script>
</head>
<body>
<header class="header">
<!--first child-->
<nav class="nav"></nav>
<!--second child-->
<section class="banner">
<!--banner container-->
<div class="banner__container">
<h1 class="banner__title">I'm a clever techie</h1>
<h1 class="banner__jobs">developer<span><i class="fas fa-angle-double-right"></i></span>
designer
<span><i class="fas fa-angle-double-right"></i></span>
photographer</h1>
</div>
</section>
</header>
<!--end header-->
<!--about section-->
<section class="about"></section>
<div class="about__center">
<article class="about-img">
<img src="https://killaexpeditions.com/wp-content/uploads/2018/03/inca-trail-machu-picchu-header.jpg" alt="" class="about-img__photo">
</article>
<article class="about-info">
<div class="about-info__container">
<h1 class="about-info__title">about me</h1>
<p class="about-info__text">hah ahdh hqdh hqdhw hqdh hqfh hqfh hwfhdvh hwfdh whfb</p>
<div class="about-info__links">
hire me
download CV
</div>
</div>
</article>
</div>
<!--end of about section-->
<script src="script.js"></script>
</body>
</html>