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>
Related
I have this problem where the flex basis size was changed based on the button size. It would be helpful if someone help me to clear this problem.
* {
box-sizing: border-box;
}
body {
background-color: #f2ebe3;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
#container {
width: 375px;
height: 630px;
border-radius: 10px;
background-color: white;
}
#back-image img {
width: 375px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#p1 {
margin-left: 20px;
opacity: 0.6;
}
#h1 {
margin-left: 20px;
font-family: 'Fraunces', serif;
}
#h2 {
margin-left: 20px;
margin-top: -5%;
font-family: 'Fraunces', serif;
}
#p2 {
margin-left: 20px;
text-align: left;
line-height: 1.4rem;
opacity: 0.7;
}
#price-container {
margin-left: 20px;
display: flex;
align-items: center;
}
#price-container h1 {
font-family: 'Fraunces', serif;
color: #3c8067;
}
#price-container p {
margin-left: 1rem;
font-family: 'Montserrat', sans-serif;
text-decoration: line-through;
opacity: 0.6;
}
#btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
width: 20rem;
height: 50px;
background-color: #3c8067;
border: none;
color: white;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
}
#btn:hover {
cursor: pointer;
background-color: #2F5951
}
.cart {
margin-right: 10px
}
#media (min-width:576px) {
#container {
display: flex;
max-width: 1440px;
max-height: 400px;
margin-top: 8%;
margin-right: 30%;
}
#container-2 {
flex-basis: 50%;
background-color: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#back-image img {
flex-basis: 50%;
height: 400px;
border-top-right-radius: 0%;
border-bottom-left-radius: 10px;
}
#btn {
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<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=Barlow+Semi+Condensed:wght#500&family=Karla&family=League+Spartan:wght#100&family=Montserrat:wght#500&family=Red+Hat+Display:wght#500&display=swap" rel="stylesheet" />
<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=Barlow+Semi+Condensed:wght#500&family=Fraunces:opsz,wght#9..144,700&family=Karla&family=League+Spartan:wght#100&family=Montserrat:wght#500&family=Red+Hat+Display:wght#500&display=swap" rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Product preview card component</title>
</head>
<body>
<div id="container">
<div id="back-image">
<img src="https://images.unsplash.com/photo-1672197339033-688e27f884f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=60" alt="Product image" />
</div>
<div id="container-2">
<p id="p1">P E R F U M E</p>
<h2 id="h1">Gabrielle Essence</h2>
<h2 id="h2">Eau De Parfum</h2>
<p id="p2">
A floral, solar and voluptuous <br /> interpretation composed by Olivier <br /> Polge, Perfumer-Creator for the House of <br /> CHANEL.
</p>
<div id="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<button id="btn">
<img class="cart" src="images/icon-cart.svg" alt="" />
Add to Cart
</button>
</div>
</div>
</body>
</html>
I tried to reduce the size of the button while changing the size of the button, and the flex-basis ratio also changed. I don't know why. Can anyone help me to clear this up?
Did few changes like added flex-basis: 50% to #back-image instead of #back-image img, added justify-content: space-between and align-items: center to #container-2 for media query.
Though if you increase button size beyond initial 50% of container size, flex-basis for container-2 may grow as well.
* {
box-sizing: border-box;
}
body {
background-color: #f2ebe3;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
text-align: left;
}
#container {
width: fit-content;
height: fit-content;
background-color: red;
border-radius: 10px;
background-color: white;
}
#container-2 {
padding-block-end: 1em;
}
#back-image {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#p1 {
margin-left: 20px;
opacity: 0.6;
}
#h1 {
margin-left: 20px;
font-family: 'Fraunces', serif;
}
#h2 {
margin-left: 20px;
margin-top: -5%;
font-family: 'Fraunces', serif;
}
#p2 {
margin-left: 20px;
text-align: left;
line-height: 1.4rem;
opacity: 0.7;
}
#price-container {
margin-left: 20px;
display: flex;
align-items: center;
}
#price-container h1 {
font-family: 'Fraunces', serif;
color: #3c8067;
}
#price-container p {
margin-left: 1rem;
font-family: 'Montserrat', sans-serif;
text-decoration: line-through;
opacity: 0.6;
}
#btn {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
margin-left: 20px;
width: 5rem;
height: fit-content;
border: none;
color: white;
border-radius: 10px;
padding: 1em;
background-color: #3c8067;
font-family: 'Montserrat', sans-serif;
}
#btn:hover {
cursor: pointer;
background-color: #2F5951
}
.cart {
margin-right: 10px
}
#media (min-width:576px) {
#container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1440px;
max-height: 400px;
margin-top: 8%;
margin-right: 30%;
}
#container-2 {
flex-basis: 50%;
width: 100%;
height: 100%;
background-color: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-block-end: 1em;
}
#back-image {
flex-basis: 50%;
width: 100%;
height: 100%;
border-top-right-radius: 0%;
border-bottom-left-radius: 10px;
}
#btn {
margin-right: 10px;
}
}
<div id="container">
<div id="back-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEKnuXARsxMe34S8gF8HM_KISj3yDVF1MCcTa4ZBTiIHPTZauH2QrLA5DNME3bBzTx5O8&usqp=CAU" alt="Product image" />
</div>
<div id="container-2">
<p id="p1">P E R F U M E</p>
<h2 id="h1">Gabrielle Essence</h2>
<h2 id="h2">Eau De Parfum</h2>
<p id="p2">
A floral, solar and voluptuous <br /> interpretation composed by Olivier <br /> Polge, Perfumer-Creator for the House of <br /> CHANEL.
</p>
<div id="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<button id="btn">
<img class="cart" src="images/icon-cart.svg" alt="" />
Add to Cart
</button>
</div>
</div>
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.
Hello, I created a site but I have a problem with my buttons I think
it comes largely from the fact that I use <a> tags (impossible for
me to create from scratch starting from a tag If someone can
explain to me this way of doing things I'm interested because I've
tried many times and it's impossible for me now
I want this style of button : 1) Invite & Support button: https://i.imgur.com/U4wF4H7.png 2) Login Button in the header section:
https://i.imgur.com/rajn8eU.png But i have this style actually :
https://i.imgur.com/xbDuOe3.png
```<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="login">
Login
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
Invite
Support
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add function js -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>```
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.header_btn {
display: flex;
justify-content: space-evenly;
}
.invite_btn {
display: flex;
justify-content: center;
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
display: flex;
justify-content: center;
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
padding: 8px 0px 0px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
To train myself, I decided to reproduce this website:
https://hydra.bot/ this project taught me many things despite the fact
that my current project does not correspond to 100% (Very complex for
me to reproduce it to 100% currently), I block especially on the
buttons, so if someone can help me I'm interested, thank you in
advance
You need to wrap your invite and support button in another div that has display flex property.
If you make display flex it is not going to do anything to itself, rather it modifies its child components
.container {
display: flex;
justify-content: center;
}
<div class='container'>
Invite
Support
</div>
Flexbox isn't working in Chrome or Safari but works fine in Firefox. The vertical images are expanding to not fit within their container, but in Firefox they're behaving as I want them to. Here is the code, any idea? Thanks.
body{ max-width: 1970px;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
padding-top: 100px;
}
a {
text-decoration: none;
font-family: 'Karla', sans-serif;
font-size: 1em;
letter-spacing: -0.03em;
}
img {
max-width: 100%;
}
/***********************************
HEADING
************************************/
header {
float: left;
position:fixed;
top:0;
width: 100%;
z-index: 99;
background-color: white;
}
h1 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4.5em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
h2 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
line-height: 3em;
}
h3 {
font-family: 'Karla', sans-serif;
font-weight: 400;
font-size:1.3em;
margin: 0 0 1em 0;
}
h4 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:2.5em;
font-weight: 700;
letter-spacing:0.0625em;
font-style: normal;
font-stretch: normal;
}
h5 {
font-family: 'Karla', sans-serif;
font-weight: 700;
font-size: 0.75em;
line-height: 1.2em;
}
p {
font-family: 'Karla', sans-serif;
line-height: 1.5em;
font-size: 1.2em;
letter-spacing: -0.03em;
}
/***********************************
NAVIGATION
************************************/
nav {
/*text-align: center;
margin: 0 2%;
box-sizing: border-box;*/
background-color: white;
}
#nav-parent {
height:;
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
.nav-icon {
flex-basis:auto;
}
#logo {
flex-basis:auto;
box-sizing: border-box;
padding-left: 20px;
}
.contact-button {
flex-basis:auto;
}
nav li a {
padding:0;
}
/***********************************
SIDE NAV
************************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: #F3F3F3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 20px;
}
#sidenav-content {
margin-left: 13px;
}
.sidenav a {
text-decoration: none;
color: #000;
display: block;
transition: 0.3s;
}
.sidenav a h4 {
overflow: hidden;
white-space: nowrap;
padding: 16px 8px 0px 6px;
color: #000;
display: block;
transition: 0.1s;
}
.sidenav p {
padding: 0px 8px 8px 26px;
font-size: 16px;
color: #000;
display: block;
transition: 0.3s;
width: 250px;
}
.slide-nav-link {
margin-top: 10px;
padding: 8px 8px 8px 26px;
line-height: 2.2em;
}
.slide-nav-social {
width: 150px;
height:50px;
margin-top: 20px;
margin-left: 26px;
}
.slide-nav-social a {
width:20px;
padding: 0 15px 0 0;
display: inline-block;
}
.sidenav a:hover, .offcanvas a:focus{
color: #6B00FF;
}
.sidenav .closebtn {
padding: 15px 8px 8px 26px;
font-size: 30px;
margin-left: 0px;
}
.closebtn a:hover {
color: #000;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/***********************************
FOOTER
************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width:20px;
height: 20px;
margin: 0 5px;
}
/***********************************
PAGE: PORTFOLIO
************************************/
.gallery{
margin: 0 auto;
list-style: none;
padding-left: 0;
}
.gallery figure {
overflow: hidden;
float: left;
width: 48%;
margin: 1%;
z-index: 97;
position: relative;
float: left;
}
.gallery figcaption {
background: rgba(255,255,255,0.97);
display : flex;
align-items : center;
text-align: center;
color: white;
float: left;
position: absolute;
left: 0;
opacity: 0;
right: 0;
top: 0;
height:100%;
z-index: 98;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
.gallery figcaption h3 {
width:100%;
text-align: center;
color:#000;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.gallery li:hover figcaption {
opacity: 1;
}
/***********************************
PAGE: Project
************************************/
.project-gallery{
margin: 0 auto;
padding: 0 1.5%;
list-style: none;
}
.project-gallery img{
max-width: 100%;
margin: 1.5% 0;
}
.project-gallery hr {
margin: 40px 0;
border: none;
height: 3px;
background-color: #000;
}
.project-title {
max-width: 100%;
text-align: center;
padding-top: 40px;
}
.description-text {
display:inline;
}
.left-column-text {
width:30%;
margin-left: 5%;
margin-top: 8px;
display:inline-block;
vertical-align: top;
}
.left-column-text p {
margin: 10px 0 25px 0;
}
.left-column-text h5 {
margin-bottom: -5px;
}
.right-column-text {
width:50%;
margin: 0 5% 0 8%;
display:inline-block;
vertical-align: top;
}
.vertical-imgs {
display: -webkit-flex; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display:flex;
justify-content: space-between;
margin: 1% 0;
}
.vertical-img-left {
box-sizing: border-box;
padding-right: 3%;
}
.vertical-img-right {
box-sizing: border-box;
}
.prev-next-buttons {
margin-right: -3.7%;
}
.prev-next-buttons a {
display: inline-block;
margin: 0;
box-sizing: border-box;
padding: 20px 5%;
}
.prev-button {
width:48%;
}
.next-button {
text-align: right;
width:48%;
}
/***********************************
PAGE: About
************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************************
PAGE: CONTACT
************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
/***********************************
COLORS
************************************/
/* site body */
body {
background-color: #fff;
color:#000;
}
/*green header
header {
background: #6ab47b;
border-color: #599a68;
}*/
/*nav background on mobile
nav {
background: #599a68;
}*/
/*logo text */
h1 {
color: #000;
}
/*link color*/
a {
color:#000
}
/*nav link colors*/
nav a, nav a:visited {
color: #000;
}
/* selected nav link colors*/
nav a.selected, nav a:hover {
color: #5513FE
}
/* selected prev next link colors*/
a h1.selected, a h1:hover {
color: #5513FE
}
a h4.selected, a h4:hover {
color: #5513FE
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cari Sekendur - MHG Modern Classic</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="fonts/1606-HQIULX.css">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul id="nav-parent">
<li class="nav-icon">
<span style="cursor:pointer" onclick="openNav()"
</span>
<img src="img/nav-icon.svg" class="nav-icon">
</li>
<li id="nav-icon">
<a href="index.html" id="logo">
<h1>CARI</h1>
</a>
</li>
<li class="nav-icon">
Contact
</li>
</ul>
</nav>
</header>
<div id="mySidenav" class="sidenav">
<div id="sidenav-content">
<img src="img/nav-icon-open.svg" class="nav-icon">
<div class= "slide-nav-link">
Work
About
Contact
</div>
<div class= "slide-nav-text">
<a href="index.html" id="logo">
<h4>CARI SEKENDUR</h4>
</a>
<p>Creating visual experiences that make the complex clear and the average exceptional.</p>
</div>
<div class= "slide-nav-social">
<img src="img/WNWlogo.svg">
<img src="img/linkedin-black.svg">
<img src="img/pinterest-black.svg">
</div>
</div>
</div>
<!--Click on the element below to open the side navigation menu.-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="wrapper">
<section class="project-gallery">
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_1.gif" alt="">
</div>
<div class="project-title">
<h2>MORGANS HOTEL GROUP - MODERN CLASSIC ZINE</h2>
</div>
<hr>
<div class="description-text">
<div class="left-column-text">
<h5>STUDIO</h5>
<p>LMNOP Creative</p>
<h5>CREATIVE DIRECTION</h5>
<p>Leigh Nelson</p>
<h5>DESIGN</h5>
<p>Cari Sekendur, Leigh Nelson, Heidi Chisholm</p>
</div>
<div class="right-column-text">
<p> Morgans Hotel Group launched the global phenomenon of boutique hotels 20 years ago, and to celebrate their rich history they put together a campaign called The Modern Classic. Each of Morgans' properties has a design aesthetic that is unlike anything you've seen before, awe-inspiring and always over-the-top. So, to capture the essence of Morgans' brand, we concepted, designed, and printed a zine for them to distribute to hotel guests. This project was a print designer's dream, complete with gold-holographic foil, gold staples, fluorescent Pantone inks, collage, illustration, a tear-out poster, and even a little pack of temporary tattoos.
</p>
</div>
<hr>
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_2.jpg" alt="">
</div>
<div class="vertical-imgs">
<img src="img/mhg-zine/CARI_MHG_ZINE_8.jpg" alt="" class="vertical-img-left">
<img src="img/mhg-zine/CARI_MHG_ZINE_5.jpg" alt="" class="vertical-img-right">
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_7.jpg" alt="">
</div>
<div class="prev-next-buttons">
<a href="#" class="prev-button">
<h2>PREVIOUS</h2>
</a>
<a href="#" class="next-button">
<h2>NEXT</h2>
</a>
</div>
<hr class="bottom-hr" style="margin-top: 0px;">
</section>
<footer>
<p></p>
</footer>
</div>
</body>
</html>
use :
#nav-parent {
display:flex;
display: -webkit-flex;
-webkit-flex-flow: initial;
flex-flow: initial;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
So, I know the media query is working, because the other selector I have styled is working fine. But, the "div.A > #greet" selector is not working at all. I put a red color in there so I could tell for sure when it is working, but the text remains the same color, and it hasn't moved. What I really need to do with the text is center it. I have tried everything I can think of or find. Please help :)
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color: white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
</div>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
In your HTML there's a stray </div> end tag before #greet element (as I mentioned in my comment) which failing your selector, moreover use div.A > #greet > h1, div.A > #greet > h2.
/* .....show borders for sizing....
* {
border: 1px solid black;
}
*/
body {
box-sizing: border-box;
align-content: center;
}
.A {
margin-top: 4%;
}
#logo {
height: 100px;
width: 220px;
float: left;
}
#greet {
float: right;
padding-top: 1%;
padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
font-family: 'Muli', sans-serif;
color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#zippity {
text-align: center;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5%;
color: #3D3D3D;
margin: 0;
}
.dooda {
display: inline;
text-align: center;
}
#Pics {
height: 60%;
max-width: 100%;
padding-top: 8%;
padding-bottom: 8%;
}
#BB {
border-top: 3px solid #0D4B6E;
border-bottom: 6px solid #0D4B6E;
padding-top: 2%;
padding-bottom: 1%;
}
div#BB > h1 {
text-transform: uppercase;
font-family: 'Muli', sans-serif;
font-size: 200%;
line-height: .001em;
color: #3D3D3D;
letter-spacing: -.04em;
}
div#BB > h2 {
text-transform: lowercase;
font-family: 'Bilbo', cursive;
font-size: 230%;
line-height: .5em;
color: #BB1F25;
letter-spacing: .03em;
}
footer#copy {
background-color: #3D3D3D !important;
}
p {
color:white;
text-align: center;
font-family: 'Muli', sans-serif;
}
.sam {
text-decoration: underline;
}
/* for mobile */
#media screen and (max-width: 570px) {
div.A > #logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
height: 30%;
width: 50%;
}
div.A > #greet > h1, div.A > #greet > h2 {
float: none;
text-align: center;
color: #BB1F25;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello, I’m Sam</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="A">
<img id="logo" src="Images/Logo.png"/>
<div id="greet">
<h1>Hello, I'm Sam</h1>
<h2>Web Designer</h2>
</div>
</div>
</div>
<img class="jumbotron hero" src="Images/hero1.jpg"/>
<h1 id="zippity">Portfolio</h1>
<div class="container">
<div class="dooda row">
<div class="tech col-md-4">
<div id="BB">
<h1>Technoline</h1>
<h2>technoline.com</h2>
</div>
<img id="Pics" src="Images/technoline.jpg"/>
</div>
<div class="maj col-md-4">
<div id="BB">
<h1>Majestique</h1>
<h2>majestique.com</h2>
</div>
<img id="Pics" src="Images/majestique.jpg"/>
</div>
<div class="sil col-md-4">
<div id="BB">
<h1>Silverzim</h1>
<h2>silverzim.com</h2>
</div>
<img id="Pics" src="Images/silverzim.jpg"/>
</div>
</div>
</div>
<footer class="jumbotron" Id="copy">
<p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
</footer>
</body>
</html>
Hope, that's solved your problem!