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>
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<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>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
hello i have a two elements of position sticky 1st is NAV LIST with background of ORANGE, 2nd is HOME with background of PINK. now my goal is when i am scrolling i want to stick the Home while continuing scrolling other contents. but i don't have a idea how to do that.. the best way i did is i used overflow:scroll to hide other elements and achieve that goal. but i don't want to show other scrollbar like overflow. i want the only one default of scrollbar.
here is my code that i wrote
* {
margin:0px;
padding: 0px;
}
.first {
height:50px;
background:orange;
position:sticky;
top:0;
}
.second {
height:90vh;
background:pink;
position:sticky;
top:90px;
}
section{
text-align: center; display: flex; align-items: center; justify-content: center; color:white;
}
ul{
text-align: center; display: flex; align-items: center; justify-content: center; color:white; flex-direction: column;
list-style-type: none;
}
li{
font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section style="height: 90vh !important; font-size: 2rem; background: purple; ">
<h1>THIS IS A TITLE</h1>
</section>
<section class="first" style="height: 10vh !important; font-size: 1rem; background: orange;">
<h1>THIS IS A NAV LIST</h1>
</section>
<section style="height: 90vh; font-size: 2rem; background: cornflowerblue;">
THIS IS A CONTENT 1
</section>
<div class="second" style="display: flex; overflow-y: hidden;">
<div style="flex:1;">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PAGE</li>
<li>LOGIN</li>
</ul>
</div>
<div style="flex:3; overflow-y: scroll;">
<section style="height: 100vh; font-size: 2rem; background: green; ">
THIS IS A CONTENT 2
</section>
<section style="height: 100vh; font-size: 2rem; background: skyblue; ">
THIS IS A CONTENT 3
</section>
<section style="height: 100vh; font-size: 2rem; background: brown; ">
THIS IS A CONTENT 4
</section>
<section style="height: 100vh; font-size: 2rem; background: violet; ">
THIS IS A CONTENT 5
</section>
</div>
</div>
</div>
</body>
</html>
You can hide this way lets try
CSS
.hide-scrollbar{
overflow: scroll;
}
.hide-scrollbar::-webkit-scrollbar {
background: transparent; //this will hide the scrollbar
width: 0px;
}
Div tag
<div class="hide-scrollbar"></div>
* {
margin:0px;
padding: 0px;
}
.hide-scrollbar {
overflow: scroll;
}
.hide-scrollbar::-webkit-scrollbar {
background: transparent;
width: 0px;
}
.first {
height:50px;
background:orange;
position:sticky;
top:0;
}
.second {
height:90vh;
background:pink;
position:sticky;
top:90px;
}
section{
text-align: center; display: flex; align-items: center; justify-content: center; color:white;
}
ul{
text-align: center; display: flex; align-items: center; justify-content: center; color:white; flex-direction: column;
list-style-type: none;
}
li{
font-size: 2rem;
}
<html>
<head>
<title></title>
</head>
<body>
<section style="height: 90vh !important; font-size: 2rem; background: purple; ">
<h1>THIS IS A TITLE</h1>
</section>
<section class="first" style="height: 10vh !important; font-size: 1rem; background: orange;">
<h1>THIS IS A NAV LIST</h1>
</section>
<section style="height: 90vh; font-size: 2rem; background: cornflowerblue;">
THIS IS A CONTENT 1
</section>
<div class="second" style="display: flex; overflow-y: hidden;">
<div style="flex:1;">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PAGE</li>
<li>LOGIN</li>
</ul>
</div>
<div style="flex:3;" class="hide-scrollbar"> <!-- changes here-->
<section style="height: 100vh; font-size: 2rem; background: green; ">
THIS IS A CONTENT 2
</section>
<section style="height: 100vh; font-size: 2rem; background: skyblue; ">
THIS IS A CONTENT 3
</section>
<section style="height: 100vh; font-size: 2rem; background: brown; ">
THIS IS A CONTENT 4
</section>
<section style="height: 100vh; font-size: 2rem; background: violet; ">
THIS IS A CONTENT 5
</section>
</div>
</div>
</div>
</body>
</html>
Hi I'm trying to put 3 sections of images and text at the center of the page. I've tried display flex align-items to center, and justify-content to center. justify-content to puts everything to the center of the page, but everything is uneven.
Here is my code
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.contact-link img{
width: 100px;
height: 100px;
}
<div className="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div className="contact-links-container">
<section className="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section className="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section className="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>
I don't know why you use className your HTML has to be class instead of className. Try to make your html with class then works fine your code.
I don't know which kind of center you want, so I had put 2 snippets.
Here is your updated snippet to be,
Snippet 1 : icons in Vertical
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.contact-link img{
width: 100px;
height: 100px;
}
<div class="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div class="contact-links-container">
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>
Snippet 2 : icons in Horizontal
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
flex-direction:column;
width:100%
}
.contact-link img{
width: 100px;
height: 100px;
margin-bottom:10px
}
<div class="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div class="contact-links-container">
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>
the default direction of flexbox is row
you should define in ".contact-link" class:
flex-direction: column;
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
flex-direction: column;
}
.contact-link img{
width: 100px;
height: 100px;
}
<div class="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div class="contact-links-container">
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>
I am trying to make a simple webpage however I am stuck on one problem. As soon as I add more text underneath the four boxes unequally the position of these boxes messes up. I was trying adding the height and width in .content .text in CSS and it seems to work when I specify height 150px or any positive integer(however the text moves out from the parent div) but I want to achieve the result in a flexible way. Rather than defining the height, I want to implement the height so that no matter how long the text I add the container's height expands rather than moving the blue box up or down.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
box-sizing: border-box;
}
.header {
background-color: rgb(13, 13, 83);
padding: 0 200px;
}
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-links {
display: flex;
padding-top: 10px;
}
.right-links {
margin-left: auto;
}
.right-links ul li {
padding-left: 20px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 90px 0px;
}
.container .image {
margin-left: auto;
}
img {
height: 200px;
width: 400px;
}
button {
border: 2px solid rgb(68, 68, 211);
margin-top: 10px;
padding: 10px 20px;
font-size: large;
font-weight: 700;
background-color: rgb(68, 68, 211);
border-radius: 5px;
cursor: pointer;
color: white;
}
/* Section of thw code that i causing problem*/
.info {
color: black;
background-color: rgb(235, 195, 195);
padding: 30px 200px;
text-align: center;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 30px 0;
}
.card {
height: 150px;
width: 150px;
border: 3px solid rgb(48, 15, 235);
border-radius: 10px;
display: flex;
flex-direction: row;
}
.content .text {
max-height: auto;
width: 150px;
}
<!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">
<link rel="stylesheet" href="/portfolio css/portfolio.css">
<title>My Portfolio</title>
</head>
<body>
<div class="header">
<div class="header-links">
<div class="left-links">
<ul>
<li>Header Logo</li>
</ul>
</div>
<div class="right-links">
<ul>
<li>Header Link one</li>
<li>Header Link two</li>
<li>Header Link three</li>
</ul>
</div>
</div>
<div class="container">
<div class="someInfo">
<h1>This website is awesome.</h1>
<p>The website has some subtext that goes here.</p>
<button>Sign Up</button>
</div>
<div class="image"><img src="https://media.istockphoto.com/photos/minar-e-pakistan-picture-id899141640" alt="Minar-e-Pakistan"></div>
</div>
</div>
</div>
<div class="info">
<h1>Some random information.</h1>
<div class="cards">
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
</div>
</div>
<div class="quote"></div>
<div class="callToAction"></div>
<div class="footer"></div>
</body>
</html>
Try using the following style on .cards
.cards {
display: flex;
justify-content: space-evenly;
/* start works, but doesn't have full browser support */
/* align-items: start; */
align-items: flex-start;
padding: 30px 0;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
padding: 30px 0;
}
You set the align-items to center instead of flex-start.
Now it will align the items on the top line.
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>