Having issue with multiple images together being distorted when I use flex. Tried align-self and align-items, but hasn't worked.
html/css:
#lastf footer{
background:#090D19;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
}
#lastf h3{
text-align: center;
width:100%;
background-color: #4B7992;
padding:30px 0px;
}
#lastf footer img{
flex:1;
padding:20px 20px;
width:1.3in;
height: 1.3in;
align-items: center;
}
<section id="lastf">
<footer>
<h3>Share the trailer with your friends!</h3>
<img src="images/fb.png" alt="Facebook" >
<img src="images/twitter.jpg" alt="Twitter" >
<img src="images/instagram.jpg" alt="Instagram" >
</footer>
</section>
<style>
#lastf footer{
background:#090D19;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
}
#lastf h3{
text-align: center;
width:100%;
background-color: #4B7992;
padding:30px 0px;
}
#lastf footer a{
padding:5px;
display: table-cell;
}
</style>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="lastf">
<footer>
<h3>Share the trailer with your friends!</h3>
</footer>
</section>
</body>
Here is the code. Hope It will help You. if any changes please let me know.
#lastf footer {
background: #090D19;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#lastf h3 {
text-align: center;
width: 100%;
background-color: #4B7992;
padding: 30px 0px;
}
#lastf footer img {
/*flex: 1;*/
padding: 20px 20px;
/*width: 1.3in;
height: 1.3in;*/
align-items: center;
}
<section id="lastf">
<footer>
<h3>Share the trailer with your friends!</h3>
<img src="https://picsum.photos/200/300" alt="Facebook">
<img src="https://picsum.photos/200/300" alt="Twitter">
<img src="https://picsum.photos/200/300" alt="Instagram">
</footer>
</section>
Related
I am having a bit problem aligning the content in the container to match all the other items in the container, and what else should I do to optimise my css code , I am a beginner to CSS and I was just practicing this project from frontendmentor , I'll be grateful if you could help me with this
HTML
<!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="stylesheet" href="styles.css" />
<title>Frontend Mentor | Profile card component</title>
</head>
<body>
<div class="container">
<div class="top-content"><img src="images/bg-pattern-card.svg" /></div>
<div class="middle-content">
<img src="images/image-victor.jpg" alt="" />
<h3 class="name">
Victor Crest<span> </span><span class="age">26</span>
</h3>
<p class="location">London</p>
</div>
<hr />
<div class="bottom-content">
<ul class="numbers">
<li>80K</li>
<li>803K</li>
<li>1.4K</li>
</ul>
<ul class="description-numbers">
<li>Followers</li>
<li>Likes</li>
<li>Photos</li>
</ul>
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.google.com/specimen/Kumbh+Sans);
:root{
--Dark-cyan: hsl(185, 75%, 39%);
--Very-dark-desaturated-blue: hsl(229, 23%, 23%);
--Dark-grayish-blue: hsl(227, 10%, 46%);
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg) ;
background-color: var(--Dark-cyan);
background-repeat: no-repeat;
background-position: -90% -500px,175% 400px;
font-family: "Kumbh Sans",sans-serif;
color:var(--Dark-grayish-blue);
font-size:18px;
}
.container{
background-color: #fff;
height:45%;
width:30%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:10rem auto;
border-radius: 12px;
position: relative;
}
.top-content,.bottom-content{
width: 100%;
}
.top-content{
width: 100%;
height:33%;
}
.top-content img{
width: 100%;
}
.middle-content img{
border-radius: 50%;
border:6px solid #fff;
position: absolute;
top:30%;
left:37%;
}
h3{
margin-top:70%;
color:#000;
}
.age{
color:var(--Dark-grayish-blue);
padding-left: 0.5em;
}
p.location{
position:relative;
left:35px;
padding:1.25rem 0;
}
ul{
display: flex;
justify-content: space-around;
padding-top:1rem;
}
ul.numbers li{
font-weight:700;
color: #000;
}
ul.description-numbers li{
padding-bottom:1rem;
font-size: 15px;
letter-spacing: 0.1em;
}
ul li{
list-style: none;
}
hr{
height:1px;
opacity: 0.5;
width: 100%;
background-color: var(--Dark-grayish-blue);
}
TRY THIS OUT AND LET ME KNOW
Add a center class to your top container.
<div class="container center">
Add this CSS code to your stylesheet
.center {
margin: auto;
width: 50%;
}
I would change the html a little bit for that.
<ul class="bottom-content">
<li>
<span>80K</span>
<span>Followers</span>
</li>
<li>
<span>803K</span>
<span>Likes</span>
</li>
<li>
<span>1.4K</span>>
<span>Photos</span>
</li>
</ul>
And the css
.bottom-content {
display: flex;
justify-content: space-around;
}
.bottom-content > li {
display: flex;
flex-direction: column;
align-items: center;
}
So I cant seem to figure out this padding, margin, and flexbox thing I cant seem to get these last 2 pictures lined up like this at the bottom of the page (green part). I need to put the logo in the middle and the photo right beside it. Also the code starts from < div class="bottom"> down.
/*
Colors:
Text: 1A1A1A
Green: #00B172
White: #FFF
*/
body{
margin: 0;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
width: 100vw;
}
nav{
display: flex;
justify-content: space-around;
width: 35vw;
}
nav > a{
text-decoration: none;
color: #070707;
}
.logo-spotify{
height: auto;
width: 10vw;
margin-left: 2vw;
}
.start{
background-image: url(../images/landing.jpg);
display: flex;
justify-content: center;
background-size: cover;
height: 850px;
align-items: center;
flex-direction: column;
}
.start-texts-Music{
color: white;
margin: 5vh 0;
font-size: 5vw;
}
.start-texts-Para{
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-size: 1.5vw;
}
h2{
/* text-decoration: underline; */
display: flex;
justify-content: center;
align-content: center;
font-size: 3vw;
border-bottom: 2px solid #06bc7d;
margin: 4vh 37vw;
}
.ads{
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
margin: 10vh 5.5vw;
}
.ads-block{
text-align: center;
}
.ads-text{
display: flex;
justify-content: center;
font-size: 25px;
color: #06bc7d;
align-items: center;
margin: 0;
}
.ads-desc{
margin: 3vh 0 3vh 0;
font-size: 20px;
width: 13vw;
color: #8a8a8a;
}
.bottom{
width: auto;
/* height: 100vh; */
background-color: #06bc7d;
margin: 0 2vw;
}
h3{
color: white;
font-size: 40px;
border-bottom: 2px solid white;
margin: 0 52vw 0 10vw;
}
.bottom-search{
padding: 5vh 5vw;
display: flex;
flex-direction: column;
width: 30vw;
margin: 0;
}
.title-search{
color: white;
margin: 0;
font-size: 3vw;
}
.desc-search{
color: white;
padding: 3vh 0;
font-size: 1vw;
max-width: 25vw;
margin: 0;
}
.center-bottom{
display: flex;
flex-direction: column;
align-items: center;
/* padding-bottom: 50vh; */
}
/* .middle{
display: flex;
flex-direction: column;
height: 600px;
justify-content: center;
margin-bottom: 100vh;
} */
.icon-white{
display: flex;
justify-content: center;
margin: 0;
align-items: center;
flex-direction: column;
}
.app{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.app-pic{
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<img
class="logo-spotify"
src="images/spotify-logo.png"
alt="logo-spotify"
/>
<nav>
Premium
Discover
Help
Download
</nav>
</header>
<div class="start">
<h1 class="start-texts-Music">Music for everyone.</h1>
<p class="start-texts-Para">
Spotify is now free on mobile, tablet and computer.
</p>
<p class="start-texts-Para">
Listen to the right music, wherever you are.
</p>
</div>
<h2>What’s on Spotify?</h2>
<div class="ads">
<div class="ads-block">
<img src="images/music-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Millions of Songs</p>
<p class="ads-desc">There are millions of songs on Spotify</p>
</div>
<div class="ads-block">
<img
src="images/high-quality-icon.png"
alt=""
height="auto"
width="150px"
/>
<p class="ads-text">HD Music</p>
<p class="ads-desc">Listen to music as if you were listening live</p>
</div>
<div class="ads-block">
<img src="images/devices-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Stream Everywhere</p>
<p class="ads-desc">
Stream music on your smartphone, tablet or computer
</p>
</div>
</div>
<div class="bottom">
<h3>It’s as yeezy as Kanye West.</h3>
<div class="bottom-search">
<div class="bottom-search">
<div class="title-search">search</div>
<p class="desc-search">
Know what you want to listen to? <br />
Just search and hit play.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Browse</div>
<p class="desc-search">
Check out the latest charts, <br />
brand new releases and great <br />
playlists for right now.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Discover</div>
<p class="desc-search">
Enjoy new music every Monday <br />
with your own personal playlist. <br />
Or sit back and enjoy Radio.
</p>
</div>
</div>
<div class="center-bottom">
<div class="middle">
<img
class="icon-white"
src="images/spotify-icon-white.png"
alt=""
height="auto"
width="100px"
/>
</div>
</div>
<div class="app">
<img
class="app-pic"
src="images/spotify-app.jpg"
alt=""
width="auto"
height="700px"
/>
</div>
</div>
<!-- <p>
Discover Help Download Music for everyone. Spotify is now free on mobile,
tablet and computer. Listen to the right music, wherever you are. What’s
on Spotify? Millions of Songs There are millions of songs on Spotify HD
Music Listen to music as if you were listening live Stream Everywhere
Stream music on your smartphone, tablet or computer It’s as yeezy as Kanye
West. Search Know what you want to listen to? Just search and hit play.
Browse Check out the latest charts, brand new releases and great playlists
for right now. Discover Enjoy new music every Monday with your own
personal playlist. Or sit back and enjoy Radio.
</p> -->
</body>
</html>
So far this is what mine looks like and last but not least i cant get this stupid "yeezy" title to look like the one in the photo i put. Mine has no spacing from the green part and when i try the margin or padding goes outside the green area.
You can have it, hope it helps
/*
Colors:
Text: 1A1A1A
Green: #00B172
White: #FFF
*/
body {
margin: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
width: 100vw;
}
nav {
display: flex;
justify-content: space-around;
width: 35vw;
}
nav>a {
text-decoration: none;
color: #070707;
}
.logo-spotify {
height: auto;
width: 5vw;
margin-left: 2vw;
}
.start {
background-image: url(../images/landing.jpg);
display: flex;
justify-content: center;
background-size: cover;
height: 850px;
align-items: center;
flex-direction: column;
}
.start-texts-Music {
color: white;
margin: 5vh 0;
font-size: 5vw;
}
.start-texts-Para {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-size: 1.5vw;
}
h2 {
/* text-decoration: underline; */
display: flex;
justify-content: center;
align-content: center;
font-size: 3vw;
border-bottom: 2px solid #06bc7d;
margin: 4vh 37vw;
}
.ads {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
margin: 10vh 5.5vw;
}
.ads-block {
text-align: center;
}
.ads-text {
display: flex;
justify-content: center;
font-size: 25px;
color: #06bc7d;
align-items: center;
margin: 0;
}
.ads-desc {
margin: 3vh 0 3vh 0;
font-size: 20px;
width: 13vw;
color: #8a8a8a;
}
.bottom {
width: auto;
/* height: 100vh; */
background-color: #06bc7d;
margin: 0 2vw;
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
h3 {
color: white;
font-size: 40px;
border-bottom: 2px solid white;
}
.bottom-search {
padding: 5vh 5vw;
display: flex;
flex-direction: column;
width: 30vw;
margin: 0;
grid-column: span 5 / span 5;
}
.title-search {
color: white;
margin: 0;
font-size: 3vw;
}
.desc-search {
color: white;
padding: 3vh 0;
font-size: 1vw;
max-width: 25vw;
margin: 0;
}
.center-bottom {
display: flex;
align-items: center;
/* padding-bottom: 50vh; */
grid-column: span 2 / span 2;
grid-column-start: 6;
}
/* .middle{
display: flex;
flex-direction: column;
height: 600px;
justify-content: center;
margin-bottom: 100vh;
} */
.icon-white {
display: flex;
justify-content: center;
margin: 0;
align-items: center;
flex-direction: column;
}
.app {
display: flex;
align-items: center;
grid-column-start: 8;
margin-left: 3rem;
grid-column: span 5 / span 5;
}
.app-pic {
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<img class="logo-spotify" src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png" alt="logo-spotify" />
<nav>
Premium
Discover
Help
Download
</nav>
</header>
<div class="start">
<h1 class="start-texts-Music">Music for everyone.</h1>
<p class="start-texts-Para">
Spotify is now free on mobile, tablet and computer.
</p>
<p class="start-texts-Para">
Listen to the right music, wherever you are.
</p>
</div>
<h2>What’s on Spotify?</h2>
<div class="ads">
<div class="ads-block">
<img src="images/music-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Millions of Songs</p>
<p class="ads-desc">There are millions of songs on Spotify</p>
</div>
<div class="ads-block">
<img src="images/high-quality-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">HD Music</p>
<p class="ads-desc">Listen to music as if you were listening live</p>
</div>
<div class="ads-block">
<img src="images/devices-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Stream Everywhere</p>
<p class="ads-desc">
Stream music on your smartphone, tablet or computer
</p>
</div>
</div>
<div class="bottom">
<div class="bottom-search">
<h3>It’s as yeezy as Kanye West.</h3>
<div class="bottom-search">
<div class="title-search">search</div>
<p class="desc-search">
Know what you want to listen to? <br />
Just search and hit play.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Browse</div>
<p class="desc-search">
Check out the latest charts, <br />
brand new releases and great <br />
playlists for right now.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Discover</div>
<p class="desc-search">
Enjoy new music every Monday <br />
with your own personal playlist. <br />
Or sit back and enjoy Radio.
</p>
</div>
</div>
<div class="center-bottom">
<div class="middle">
<img class="icon-white" src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png" alt="" height="auto" width="100px" />
</div>
</div>
<div class="app">
<img class="app-pic" src="https://imag.malavida.com/mvimgbig/download-fs/spotify-10520-1.jpg" alt="" width="auto" height="700px" />
</div>
</div>
<!-- <p>
Discover Help Download Music for everyone. Spotify is now free on mobile,
tablet and computer. Listen to the right music, wherever you are. What’s
on Spotify? Millions of Songs There are millions of songs on Spotify HD
Music Listen to music as if you were listening live Stream Everywhere
Stream music on your smartphone, tablet or computer It’s as yeezy as Kanye
West. Search Know what you want to listen to? Just search and hit play.
Browse Check out the latest charts, brand new releases and great playlists
for right now. Discover Enjoy new music every Monday with your own
personal playlist. Or sit back and enjoy Radio.
</p> -->
</body>
</html>
You can use this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<header>
<img
class="logo-spotify"
src="images/spotify-logo.png"
alt="logo-spotify"
/>
<nav>
Premium
Discover
Help
Download
</nav>
</header>
<div class="start">
<h1 class="start-texts-Music">Music for everyone.</h1>
<p class="start-texts-Para">
Spotify is now free on mobile, tablet and computer.
</p>
<p class="start-texts-Para">
Listen to the right music, wherever you are.
</p>
</div>
<h2>What’s on Spotify?</h2>
<div class="ads">
<div class="ads-block">
<img src="images/music-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Millions of Songs</p>
<p class="ads-desc">There are millions of songs on Spotify</p>
</div>
<div class="ads-block">
<img
src="images/high-quality-icon.png"
alt=""
height="auto"
width="150px"
/>
<p class="ads-text">HD Music</p>
<p class="ads-desc">Listen to music as if you were listening live</p>
</div>
<div class="ads-block">
<img src="images/devices-icon.png" alt="" height="auto" width="150px" />
<p class="ads-text">Stream Everywhere</p>
<p class="ads-desc">
Stream music on your smartphone, tablet or computer
</p>
</div>
</div>
<div class="bottom">
<div class="bottom-search-wrap">
<h3>It’s as yeezy as Kanye West.</h3>
<div class="bottom-search">
<div class="title-search">search</div>
<p class="desc-search">
Know what you want to listen to? <br />
Just search and hit play.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Browse</div>
<p class="desc-search">
Check out the latest charts, <br />
brand new releases and great <br />
playlists for right now.
</p>
</div>
<div class="bottom-search">
<div class="title-search">Discover</div>
<p class="desc-search">
Enjoy new music every Monday <br />
with your own personal playlist. <br />
Or sit back and enjoy Radio.
</p>
</div>
</div>
<div class="center-bottom">
<div class="middle">
<img
class="icon-white"
src="images/spotify-icon-white.png"
alt=""
height="auto"
width="100px"
/>
</div>
</div>
<div class="app">
<img
class="app-pic"
src="images/spotify-app.png"
alt=""
width="auto"
height="700px"
/>
</div>
</div>
</body>
</html>
body{
margin: 0;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
width: 100vw;
}
nav{
display: flex;
justify-content: space-around;
width: 35vw;
}
nav > a{
text-decoration: none;
color: #070707;
}
.logo-spotify{
height: auto;
width: 10vw;
margin-left: 2vw;
}
.start{
background-image: url(../images/landing.jpg);
display: flex;
justify-content: center;
background-size: cover;
height: 850px;
align-items: center;
flex-direction: column;
}
.start-texts-Music{
color: white;
margin: 5vh 0;
font-size: 5vw;
}
.start-texts-Para{
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
font-size: 1.5vw;
}
h2{
/* text-decoration: underline; */
display: flex;
justify-content: center;
align-content: center;
font-size: 3vw;
border-bottom: 2px solid #06bc7d;
margin: 4vh 37vw;
}
.ads{
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
margin: 10vh 5.5vw;
}
.ads-block{
text-align: center;
}
.ads-text{
display: flex;
justify-content: center;
font-size: 25px;
color: #06bc7d;
align-items: center;
margin: 0;
}
.ads-desc{
margin: 3vh 0 3vh 0;
font-size: 20px;
width: 13vw;
color: #8a8a8a;
}
/* New Style Start============ */
.bottom{ background-color: #06bc7d; margin: 0 50px; padding: 40px; display: flex; justify-content: space-between; align-items: stretch; }
.bottom h3{color: white;font-size: 40px;border-bottom: 2px solid white;margin: 0 0 20px 0;}
.bottom .bottom-search{padding: 0 0 20px 0;margin: 0;}
.bottom .title-search{color: white;margin: 0;font-size: 3vw;}
.bottom .desc-search{color: white;padding: 0 0;font-size: 1vw;margin: 0;}
.bottom .center-bottom{ display: flex; align-items: center; justify-content: center; }
I'm new to HTML/CSS. I'm trying to space out the items on my nav-link, due to the fact that the "collections" and "spark" seem to be overlapping each other. Is there any way to go about this, and why it is happening? should i accomplish this using Flexbox or grid? I've included the code below.
<!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>My Website</title>
<link rel="stylesheet" href="nav.css">
<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=Ubuntu:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<div class="navigation-wrapper">
<div class="left-column">
<img src="Logos/codepen-wordmark-display-inside-
white#10x.png" alt="Logo">
</div>
<div class="center-column">
<div class="links-wrapper">
<div class="nav-link">
Pens
</div>
<div class="nav-link">
Projects
</div>
<div class="nav-link">
Posts
</div>
<div class="nav-link">
Collections
</div>
<div class="nav-link">
<div class="icon">
<i class="fas fa-chevron-down"></i>
Spark
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
------CSS Here------
.navigation-wrapper {
color: #cbcbcb ;
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 50px 10px 35px 5px;
background-color: black;
}
.navigation-wrapper > .left-column {
margin-left: 15px;
margin-bottom: 30px;
width: 250px;
}
.navigation-wrapper > .left-column img {
align-items: top;
width: 175px;
padding: 30px 50px 10px 15px;
}
.navigation-wrapper > .center-column {
display: flex;
padding: 50px 30px 10px 10px;
justify-content: space-between;
align-items: center;
}
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
.nav-link a {
color:#cbcbcb;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
font-weight: bold;
transition: 1.0s;
}
The problem lies here :
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
width: 70px;
text-align: center;
}
You have given a fixed width to the nav-link class and that's why the content is overlapping. Change the CSS like this:
.navigation-wrapper > .center-column > .links-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem; /* add some gap as well */
}
.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
/* width: 70px; */
text-align: center;
}
.head{
display:flex;
}
.navbar{
display:flex;
}
a{
text-decoration:none;
margin-right:2rem;
}
li{
list-style:none;
}
img{
width:10%;
}
<!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>
</head>
<body>
<header class="head">
<div class="logo">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
<nav class="navbar">
<li>Pens</li>
<li>Projects</li>
<li>Posts</li>
<li>Collections</li>
<li>Spark</li>
</nav>
</header>
</body>
</html>
Complete newb here. Third question here.
How do I make the text "A Web Developer"
Come under "Hey I'm Hyde"
and how do I control the space between "A Web Developer" and "Hey I'm Hyde"?
I tried to use a line break but there has to be a better way. Line breaks did not work well.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
#big {
font-size: 65px;
display: inline-block;
color: gainsboro;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
<h1 id="big">
Hey I'm Hyde
</h1><br><br><br>
<br>A Web Developer</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
Link to Fiddle:
https://jsfiddle.net/so2w7rkp/
I wish to gain the ability to put the text "A web developer" underneath "Hey I'm hyde" for future flexbox projects.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#welcome-section p:nth-child(1) {
font-size: 30px;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
Hey I'm Hyde
</p>
<p>
A Web Developer
</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
flex-direction: column;
<section id="welcome-section">
<h1 id="big">
Hey I'm Hyde
</h1>
<small>A Web Developer</small>
</section>
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
I am trying to get the articles of my section to display exactly like this (with the third article centered when expanded to a fuller browser width): https://www.screencast.com/t/vGdpZ91l
I've explored all the display options of CSS. The current CSS is set to display: inline-flex;
Here is my CSS/HTML. Help would be much appreciated.
.places h1 {
align-content: top-left;
font-size: 30px;
}
.places article {
display: inline-flex;
width: 390px;
border: #FF5A5F 1px solid;
border-radius: 4px;
padding: 20px;
margin: 20px;
}
.places article h2 {
font-size: 30px;
text-align: center;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="7-places.css" media="all">
</head>
<body>
<header>
</header>
<div class="container">
<section class="places">
<h1>Places</h1>
<article class="home">
<h2>Home</h2>
</article>
<article class="apartment">
<h2>Apartment</h2>
</article>
<article class="dorm">
<h2>Dorm</h2>
</article>
</section>
</div>
</body>
</html>
Use flex on the parent, and set it to flex-wrap: wrap; justify-content: center;.
.places {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.places h1 {
align-content: top-left;
font-size: 30px;
width: 100%;
}
.places article {
width: 390px;
border: #FF5A5F 1px solid;
border-radius: 4px;
padding: 20px;
margin: 20px;
}
.places article h2 {
font-size: 30px;
text-align: center;
}
<div class="container">
<section class="places">
<h1>Places</h1>
<article class="home">
<h2>Home</h2>
</article>
<article class="apartment">
<h2>Apartment</h2>
</article>
<article class="dorm">
<h2>Dorm</h2>
</article>
</section>
</div>