CLICK HERE TO SEE WHAT IT LOOKS LIKE RIGHT NOW!!!
CLICK HERE TO SEE MY GOAL-ish
(had to hide my name and face for privacy names in the picture and censor my name in the html)
1. So basically I was wondering how I could put the text and the image in two separate columns side by side?
2. Also, I don't know how to remove that space between the header and main part. I'm sorry if this seems ridiculous.
HTML (not all of it, just the important part):
<h4>My Portfolio</h4>
<nav>
<ul>
<li>Home</li>
<li>Education</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
<div class="intro">
<p>
<b>Hi!</b>
<br>
My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.
</p>
<img src="Me.jpg" alt="A picture of me in front of pink flowers" width="500" height="500">
</div>
CSS:
body{margin-left: 10%;
margin-right: 10%;
margin-top: 2em;
}
header{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
h4{
padding: 20px;
}
.wrapper{
background-color: #a989d6;
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul{
list-style-type: none;
}
nav a{
text-decoration: none;
padding: 20px;
}
nav li{
display: inline;
}
.intro{
text-align: center;
align-items: center;
}
main{
background-color: #dfcff6;
}
footer{
background-color: #a989d6;
text-align: center;
padding: 20px;
font-style: italic;
}
You probably want to use display grid for the columns. But it should work with display flex also.
For the space remove the margin and padding.
Something like this :
<!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>
<div class="container">
<div class="content">content</div>
<div class="content">content</div>
</div>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
height: 100vh;
background-color: yellow;
display: grid;
grid-template-columns: 1fr 1fr;
}
.content{
display: grid;
place-items: center;
border: 1px solid blue;
}
</style>
</body>
</html>
Here's my solution using flex:
.intro {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
text-align: center;
background-color: #dfcff6;
}
body{
margin-left: 10%;
margin-right: 10%;
margin-top: 2em;
}
<div class="intro">
<p>
<b>Hi!</b>
<br> My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.
</p>
<img src="https://fotojoker.pl/blog/wp-content/uploads/autor-300x300.jpg" alt="Another photo because I have not original :)" width="500" height="500">
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 6 months ago.
So far, with the use of margin: auto I have been able to center my flexbox horizontally but not vertically along my webpage.
I am quite new to CSS and would like some assistance. Thank you.
.container {
background-image: url(paperbackground.jpg);
color: #D64933;
margin: auto;
width: 500px;
}
.box {
align-content: center;
display:flex;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
justify-content: center;
padding: 2px;
}
<div class="container">
<ul>
<!--Below is an unordered list.-->
<div class="box"><li>Video Games</li></div>
<div class="box"><li>Watching technology, hacking and other documentaries.</li></div>
<div class="box"><li>Chess</li></div>
<div class="box"><li>Cricket</li></div>
</ul>
</div>
The effect can also be achieved by making the container a flexbox.
See here center
<!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>Static Template</title>
<style>
.container {
color: #d64933;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
text-align: center;
display: flex;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
justify-content: center;
padding: 2px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<!--Below is an unordered list.-->
<div class="box"><li>Video Games</li></div>
<div class="box">
<li>Watching technology, hacking and other documentaries.</li>
</div>
<div class="box"><li>Chess</li></div>
<div class="box"><li>Cricket</li></div>
</ul>
</div>
</body>
</html>
body {
/* setting the height to the device height */
height: 100vh;
/* solving the bug about scrollbar */
margin: 0;
/* using margin auto, basically you don't need to write align-items: center; in body it will automatically work */
/* so just use flexbox and it will work fine */
display: flex;
}
.container {
background-image: url(paperbackground.jpg);
color: #d64933;
margin: auto;
/* for deleting the wrapping thing don't use this 500px line below */
width: 500px;
}
.box {
align-content: center;
display: flex;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
justify-content: center;
padding: 2px;
}
<body>
<div class="container">
<ul>
<!--Below is an unordered list.-->
<!-- 1 -->
<div class="box">
<li>Video Games</li>
</div>
<!-- 2 -->
<div class="box">
<li>Watching technology, hacking and other documentaries.</li>
</div>
<!-- 3 -->
<div class="box">
<li>Chess</li>
</div>
<!-- 4 -->
<div class="box">
<li>Cricket</li>
</div>
</ul>
</div>
</body>
I'm creating landing page and I want to separate navbar, text that should be in the middle of wallpaper and text that should at the bottom.
Here is the sandbox:
https://codesandbox.io/s/long-worker-dy31zt?file=/index.html
As you can see, justify-content: space-between is not doing anything on Y axis even-though I made sure it is flex-direction: column. What is the best way to center text in the middle of the background on the landing page? I wanted to do it with flex but it's not working.
You need to use this:
.header-wrap {
height: 100vh;
}
Only after that the .header-wrap will take all the space vertically and your big title and mini title will be placed in the middle of the page.
Here you can check that:
https://codesandbox.io/s/elated-clarke-rkwrj9?file=/styles.css
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
height: 100vh;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
width: 50vw;
display: flex;
justify-content: space-between;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!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="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
space-between isn't doing anything because it doesn't know how much space is there with no defined height. Set the height of the header-wrap to 100vh and it'll work.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
html {
scroll-behavior: smooth;
}
/* ===============
header styles
===============
*/
header {
min-height: 100vh;
background-color: black;
}
.header-wrap {
width: min(90%, 1290px);
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.logo {
font-size: 2rem;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 45px 0;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}
.navbar-nav {
list-style: none;
display: flex;
}
.header-text {
text-align: center;
}
.header-text h5 {
color: orange;
font-size: 1.5rem;
}
.header-text h1 {
color: white;
font-size: 5rem;
}
.header-text-down {
color: white;
text-align: center;
}
<!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="styles.css" />
</head>
<body>
<header>
<div class="header-wrap">
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item">ITEM1</li>
<li class="nav-item">ITEM2</li>
<li class="nav-item">ITEM3</li>
<li class="nav-item">ITEM4</li>
</ul>
</nav>
<div class="header-text">
<h5>mini title</h5>
<h1>BIG TITLE</h1>
</div>
<div class="header-text-down">
<p>small text that should be down</p>
</div>
</div>
</header>
</body>
</html>
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<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="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<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>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
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.
I am using flexbox and the footer is outside of flexbox contents.
my issue is the footer is in the middle of flex items and is not setting on the bottom. I don't know what I did wrong. everything I've tried either hasn't worked so far.
any help will be apperiaciate.thanks
here is my full code : https://codepen.io/ROY1319/project/editor/ANyGyr
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #9bf6ff;
font-family: 'Oswald', sans-serif;
width: 100%;
}
#headerExperience {
line-height: 200px;
font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: khaki;
background-color: steelblue;
background-image: url("images/Experience\ background\ imagee.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 25px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
.century,
.LNA {
border: 2px solid black;
font-size: 16px;
background-color: #E5ECE9;
display: block;
}
.century,
.LNA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 15OPX
}
.headers,
.tasks {
display: block;
align-content: space-around;
}
/* nav and ul */
ul {
overflow: hidden;
display: inline-block;
/* how do I set the vertical spacing between the list items? */
}
li {
margin: 10px 0;
letter-spacing: 2px;
}
footer {
background-color: orangered;
padding: 0 1rem;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer .foot {
display: flex;
justify-content: space-between;
align-items: center;
color: red;
padding: 5em 0;
}
footer ul {
list-style: none;
margin: 0;
}
footer li {
display: inline-block;
padding: 0.75rem 1.25rem;
}
<!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="experience.css" />
<title>Experience</title>
</head>
<body>
<!--Header-->
<div id="headerExperience">
<h1>Experience</h1>
</div>
<!--container-->
<div class="container">
<!-- Century-->
<div class="century">
<div class="media">
<img src="imag logo.png" alt="CenturyImage" />
<figcaption>Century Logo</figcaption>
</div>
<div class="headers">
<h2>ddddd</h2>
<h3>IT student Worker</h3>
<h4>Whie MN,2018</h4>
</div>
<div class="tasks">
<h5>TASKS</h5>
<ul>
<li>
1.Instructed users over the phone by describing what to look for and steps to take.
</li>
<li>
2.Adapted to change and learn new version of Microsoft quickly.
</li>
<li>
3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
</li>
<li>4.Created appropriate technical documents.</li>
</ul>
</div>
</div>
<!-- lNA-->
<div class="LNA">
<div class="media">
<img src="images/logo.jpg" alt="logo" />
<figcaption>LNA Logo</figcaption>
</div>
<div class="headers">
<h2>LNA</h2>
<h3>Digital Support Specialist</h3>
<h4>Minneapolis MN,2021-Present</h4>
</div>
<div class="tasks">
<h5>Tasks</h5>
<ul>
<li>1.Update and manage a simple program website.</li>
<li>2.Help participants access free and safe internet service.</li>
<li>
3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
</li>
<li>
4.Distribute free laptops and tech accessories to participants.
</li>
<li>5.Lead small student groups practicing computer skills.</li>
</ul>
</div>
</div>
</div>
<footer> // footer started here
<div class="foot">
<div class="copyright">© A Team</div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Experience</li>
<li>Achievemants</li>
<li>About</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>