I can't seem to be able to join my <section> and the <p> underneath. Here is my HTML and CSS code:
#projects {
background: linear-gradient(#5db7de, #4e9bbb);
flex-direction: column;
align-items: center;
display: flex;
}
img {
width: 500px;
height: 500px;
object-fit: cover;
border-radius: 10px;
}
.project-tile {
font-size: 40px;
font-weight: bold;
background-color: #113f53;
width: 500px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#project-1 {
padding-top: 30px;
}
<div id="projects">
<h3 id="intro-projects">This are my HTML/CSS Web Responsive projects</h3>
<br />
<section class="project-img" id="project-1">
<a href="https://survey-form.freecodecamp.rocks" target="_blank">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg" />
</a>
</section>
<p class="project-tile">SURVEY FORM</p>
<div id="space_bottom"></div>
</div>
My goal:
You can see how my image text and pictures are separated unlike the "My goal" picture.
You can solve this issue by applying margin-top: 0 to .project-tile and applying display: block to img.
Related
Just finished a mini project and everything seemed to be going accordingly until I completed the footer this page. For each section, the divs do not stretch to the end, which wasn't an issue before. I'm assuming it's something to do with the pixels on the page?
Notice the gap on the left/right of the screen:
enter image description here
enter image description here
HTML:
<body>
<div class="header">
<div class="header-left">
<div class="logo">Header Logo</div>
</div>
<div class="header-right">
<div class="links-top">
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</div>
</div>
</div>
<div class="hero">
<div class="hero-left-head">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes here under the main title. It’s a smaller font and the color is lower contrast.</p>
<button class="hero-button">Sign Up</button>
</div>
<div class="sade">
<img src="https://s3.us-east-1.amazonaws.com/vnda-cockpit/www-streetopia-me/2020/09/11/5f5bfd8c2bb85sade01.jpg" alt="sade" height="200" width="350">
</div>
</div>
<div class="middle">
<div class="title"><h1>Some Information?</h1></div>
<div class="bmw-pics">
<div class="bmw-text">
<img src="https://aprperformance.com/wp-content/uploads/2015/01/BMW_M4_Lip_Installed_LR_7.jpg" alt="puke-green">
<p>Puke Green</p>
</div>
<div class="bmw-text">
<img src="https://cdn.bmwblog.com/wp-content/uploads/2015/03/Yas-Marina-Blue-BMW-F80-M3-Gets-Some-Essential-Updates-7.jpg" alt="yas">
<p>Yas Marina</p>
</div>
<div class="bmw-text">
<img src="https://f80.bimmerpost.com/forums/attachment.php?attachmentid=2671354&stc=1&d=1628858312" alt="Frost White">
<p>Frost White</p>
</div>
<div class="bmw-text">
<img src="https://1c2a8a2161d644d95009-22d26b38e78c173d82b3a9a01c774ffa.ssl.cf1.rackcdn.com/image/projectcars/f80m3/f80_m3_carbon_mirror_covers_7_w705.jpg" alt="Imola Red">
<p>Imola Red</p>
</div>
</div>
</div>
<div class="above-footer">
<div class="above-footer-p1">
<p>If you do what you've always done, then you'll get what you've always had, you dumb buffons!</p>
</div>
<div class="above-footer-p2">
<p>- A Wise Prophet</p>
</div>
</div>
<div class="last-space">
<div class="blue-box">
<div class="action"><strong>Call to action! It's time!</strong></div>
<div class="product-bit">Sign up for our product by clicking the button to your right :)</div>
<button class="last-button">Sign Up!</button>
</div>
</div>
<div class="footer">
<p>Copyright © The Odin Project 2021</p>
</div>
</body>
CSS:
.header {
background-color: #1F2937;
display: flex;
justify-content: space-around;
color: #f9faf8;
font-size: 24px;
padding: 10px;
}
.links-top {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
gap: 16px;
font-size: 20px;
}
a {
text-decoration: none;
color: #f9faf8;
}
p {
font-size: 15px;
}
.hero {
display: flex;
flex-direction: row;
background-color: #1F2937;
gap: 50px;
align-items: center;
justify-content: center;
padding-bottom: 30px;
}
.hero-left-head {
font-size: 24px;
color: #f9faf8;
}
.sade {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.hero-button {
background-color: #3882F6;
color:#f9faf8;
border-radius: 25px;
padding: 0;
height: 30px;
width: 100px;
}
.middle {
display: flex;
flex-direction: column;
color:#1F2937;
}
.bmw-pics {
display: flex;
margin-left: auto;
margin-right: auto;
gap: 20px;
}
.bmw-text img {
height: 260px;
border-radius: 10px;
width: 250px;
}
.bmw-text p {
text-align: center;
}
.title {
text-align: center;
}
.above-footer {
background-color: #e5e7eb;
justify-content: center;
display: flex;
flex-direction: column;
}
.above-footer-p1 p,
.above-footer-p2 p {
font-size: 36px;
}
.above-footer-p2 {
display: flex;
justify-content: flex-end;
margin-right: 50px;
}
.above-footer-p1 p {
font-style: italic;
margin-top: 100px;
color: #1F2937;
display: flex;
align-items: center;
justify-content: center;
}
.last-space {
color: #f9faf8;
display: flex;
justify-content: center;
align-items: center;
}
.blue-box {
display: flex;
background-color: #3882F6;
width: 800px;
margin: 50px;
flex-direction: column;
padding: 50px;
border-radius: 15px;
}
.last-button {
align-self: flex-end;
padding:5px 25px 5px 25px;
color:#F9FAF8;
background-color: #3882F6;
border-radius: 10px;
border-color: #F9FAF8;
justify-content: center;
}
.footer {
background-color: #1F2937;
color: #F9FAF8;
display: flex;
justify-content: center;
align-items: center;
}
Please forgive the extensive css sheet, I'm still learning :) Any help is greatly appreciated!
There's margin on the body. By default the body element has 8px of margin on all sides. You can resolve this by adding this CSS to your project:
body {
margin: 0;
}
Some call this a CSS reset. You can learn more here. Hope this helps!
It's because the body html element (along with many other elements) has margin automatically applied. You can just clear it by adding this to your CSS:
body {
margin: 0px
}
You might want to try using something like Normalize.css for your projects. It really removes a lot of these "why is this happening" issues related to CSS. Also, you should read up on your browser's Devtools (on Chrome, for example, you can click Ctrl+Shift+i and it will open. You can then inspect specific elements and it will tell you why a certain element has a certain style.
For example, you can see that by hovering over the first paragraph of your post that it has a margin-bottom of 1.1em because it is selected by .s-prose p.
Hope that helps!
I am trying to wrap div text with flex but its not working, the title div seems to be overlapping the other post divs, I have tried using line height and applying flex wrap, still no fix. I've also tried centering with css grid but that didn't seem to get either,If anyone can help me with this thank you.
*,
*::before,
*::after {
font-family: Mukta, sans-serif;
}
body {
margin: 0;
padding: 0;
}
#header {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#quote {
display: flex;
font-weight: 300;
font-size: 20px;
}
#name {
font-size: 55px;
}
#navlist {
display: flex;
padding-inline-start: 0px;
gap: 40px;
}
#navlistelm {
padding: 15px 38px;
font-size: 20px;
font-weight: 200;
list-style: none;
}
#navbar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#navimgcontainer {
display: flex;
flex-direction: row;
width: 100%;
height: 70%;
}
img {
height: 500px;
width: 1950px;
}
#aboutcontainer {
display: flex;
width: 80%;
height: 100%;
gap: 40px;
}
#about {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 100%;
}
#aboutText {
display: flex;
font-size: 20px;
font-weight: 400;
flex-direction: column;
gap: 40px;
width: 100%;
}
#abouttitle {
font-weight: 700;
font-size: 40px;
}
#aboutImage {
display: flex;
justify-content: center;
align-items: center;
height: 90%;
width: 50%;
}
#ebookcontainer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80%;
}
#econtainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 75%;
height: 80%;
background-color: #dd927c;
border-radius: 5px;
}
#ebookimage {
display: flex;
width: 45%;
height: 100%;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
#ebook {
height: 585px;
width: 550px;
}
#etext {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
height: 100%;
}
#ebookstuff {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
font-family: Dancing Script, 'sans serif';
width: 80%;
height: 50%;
color: white;
font-size: 80px
}
#egraph {
display: flex;
color: white;
padding-inline-start: 60px;
width: 100%;
height: 20%;
font-size: 30px;
}
#ebookdirect {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
width: 100%;
}
#ebutton {
border: none;
color: white;
font-size: 30px;
background-color: rgba(201, 115, 116, 255);
border-radius: 5px;
height: 60px;
width: 400px;
}
#ebutton:hover {
cursor: pointer;
}
#subscribelist {
padding: 0px;
list-style: none;
}
#subscribelistelm {
display: flex;
padding: 10px;
}
#footer {
display: flex;
flex-direction: column;
width: 100%;
height: 80%;
}
#text {
display: flex;
gap: 10px;
flex-direction: column;
width: 100%;
height: 20%;
}
#postcontainer {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#post1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
height: 100%;
width: 30%;
}
#postimg {
height: 300px;
width: 300px;
}
#postbutton1 {
border: none;
color: white;
font-size: 20px;
background-color: #de8e7a;
width: 30%;
height: 5%;
}
#post1title {
font-size: 30px;
font-weight: bold;
}
#post1preview {}
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Mukta:wght#200;300;400;500;600&display=swap" rel="stylesheet">
<section id="header">
<div id="name">CAVETTA JOHNSON</div>
<div id="quote">Living life with intention. Live don't just exist.</div>
</section>
<nav id="navbar">
<ul id="navlist">
<li id="navlistelm">Home</li>
<li id="navlistelm">Travel Blog</li>
<li id="navlistelm">ebook</li>
<li id="navlistelm">Merchandise</li>
<li id="navlistelm">1 On 1 Session</li>
<li id="navlistelm">About Us</li>
</ul>
</nav>
<div id="navimgcontainer">
<img src="./images/CAVETTA JOHNSON.png" alt="">
</div>
<section id="about">
<div id="aboutcontainer">
<div id="aboutText">
<div id="abouttitle">I finally decided to start living!</div>
Hey hey hey! My name is Cavetta, and welcome to Life With Vetta. I am a mom to 2 amazing boys. Kal-El 16 And Jor-El 11. I have been divorced and a single mom for a few years now. Juggling raising the men of tomorrow, working, having a life outside of
my boys (nonexistent). We LOVE to travel. I originally moved from Jamaica to California for college. The travel bug had bitten me and the need to see the world and what it has to offer has always been with me. I went on a few cruises before kids,
traveled to different states and cities, exploring and wandering. When I found myself with 2 kids, alone I knew one of my first goals was to show them the world and let them see things outside of their comfort zone. We took our first cruise when
they were itsy bitsy and had a blast. Since then, we traveled the states, city hopping and seeing their home country. We then trotted over to London and Paris when they were older and that struck a chord and lit a fire that was not going to be tamed
by anything but travel and adventure. I had been thinking and considering being a digital nomad.
</div>
<div id="aboutImage">
<img src="./images/IMG_3238.jpg" alt="">
</div>
</div>
</section>
<section id="ebookcontainer">
<div id="econtainer">
<div id="etext">
<div id="ebookstuff">So you want to travel the world
</div>
<div id="egraph">I do not have millions in the bank but I am making it happen without stress or worry.</div>
<div id="ebookdirect">
<button id="ebutton">Download!</button>
</div>
</div>
<div id="ebookimage">
<img src="./images/Digital Download! (1).png" alt="" id="ebook">
</div>
</div>
</section>
<section id="postcontainer">
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOOdddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="post1preview">ssssssddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddds</div>
<button id="postbutton1">Read More!</button>
</div>
</section>
<section id="footer">
<div id="Text">
<div id="title">Subscribe To Follow Our Adventures</div>
<div id="signup">Get the latest updates on where we are and what fabulous experiences we are having!</div>
</div>
<div id="Subscribe">
<form action="api" id="subscribeform">
<ul id="subscribelist">
<li id="subscribelistelm">
<input type="firstname" id="firstname" name="user_firstname" />
</li>
<li id="subscribelistelm">
<input type="lastname" id="lastname" name="user_lastname" />
</li>
<li id="subscribelistelm">
<input type="email">
</li>
<li id="subscribebutton">
<button>Yo</button>
</li>
</form>
</div>
</section>
One solution would be to assign width and word-wrap.
For example for the #post1title id:
#post1title {
font-size: 30px;
font-weight: bold;
width:100%;
word-wrap: break-word;
}
in spite of my research on the internet I did not succeed in doing what I wanted to do.
I want to put my text to the left of my text or my text to the right of my image but I can't do it.
Here is the code :
HTML :
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
CSS :
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
width: 150px;
height: 150px;
}
Thank you for reading
Since you're trying to change your text's, you have to change your flex-item div, which is:
In your Css script, put this:
.flex-item{
display:flex;}
Set display:flex; on your flex-item div.
HTML:
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
CSS:
.flex-item{
display:flex;
}
Change your .flex-item class to this hope this solves your problem.
.flex-item {
display:flex;
flex-direction:row;
}
I tried like this. It works.
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
css
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
}
I've provided the html and css. The is modified by the script.js file which is why it's empty. I want the text to appear at the center even when screen width is reduced. Please help.
HTML:
<section id="page1">
<div class="welcome">
<div class="box">
<img class="mypic" src="img/me.jpg" alt="" srcset="" />
<h1 id="welcomeText1"></h1>
</div>
</div>
</section>
CSS:
#page1, #page2, #page3, #page4 {
min-height: 100vh;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-left: 2rem;
}
.mypic {
width: 15rem;
height: 15rem;
border-radius: 500px;
}
I've provided screenshots below.
Absolute beginner here. =)
At normal width
On decreasing width
When you do justify-content: center; it will only align the div/element which is the child of your flexbox.
But to align the text/content in that particular element you need to use text-align: center;
If I correctly understand, you just need to add CSS property to welcomeText1:
#page1, #page2, #page3, #page4 {
min-height: 100vh;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-left: 2rem;
}
.mypic {
width: 15rem;
height: 15rem;
border-radius: 500px;
}
#welcomeText1{
text-align: center;
border: 3px solid green;
}
<section id="page1">
<div class="welcome">
<div class="box">
<img class="mypic" src="img/me.jpg" alt="" srcset="" />
<h1 id="welcomeText1">Welcome to stackoverflow <br> Welcome</h1>
</div>
</div>
</section>
(I had you a border to show you)
You can use text-align: center for the text.
#welcomeText1 {
text-align: center;
}
Or if you want to keep the text in that structure, you could decrease the font size when using small screens with media queries.
#welcomeText1 {
font-size: 1.4rem;
}
#media (max-width: 720px) {
#welcomeText1 {
font-size: 1.2rem;
}
}
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 1 year ago.
There is 6 items in navbar:
first 3 items should be aligned as flex-start - on beginning of navbar.
Then Logo should be in center of navbar
And on the end -> flex-end should come 2 icons
Here is screenshot of navbar current condition:
Problem: is position of Logo - am using margin-left: '27%'. And on different screen size logo is not aligned well.
I would like to align some how that logo trough flex, is there a way to do that with flex?
Check the code:
HTML/jsx:
<div className="container">
<header className="header">
<nav className="user-nav">
<div className="user-nav-item">
<Link href="/">
<a className="user-nav-item-link">Overview</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/feed">
<a className="user-nav-item-link">Feed</a>
</Link>
</div>
<h3 className="logo">Logo</h3>
</nav>
<div className="user-nav-icon">
<div className="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div className="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
CSS:
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
.header {
display: flex;
align-items: center;
height: 5rem;
color: #fff;
background-color: black;
.user-nav {
width: 100%;
display: flex;
align-items: center;
&-item {
width: 5.5rem;
padding: 1.5rem;
cursor: pointer;
}
&-item-link {
text-decoration: none;
color: white;
}
.logo {
margin-left: 27%;
}
&-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
& > * {
padding: 0 0.8rem;
cursor: pointer;
}
&-icon-notification {
color: red;
}
}
}
}
}
Using Flex Box. It will be harder to achieve that, I have an alternative. Please test this code on codepen:
* {
box-sizing: border-box;
}
.parent{
width: 100%;
min-height: 80px;
background-color: yellow;
display: relative;
}
.nav-menu,
.icons{
display: inline-block;
}
.icons{
float: right;
margin-left: 75px; /*This will help your icons to never go below the logo element*/
}
.nav-menu{
margin-right: 75px; /*This will help your nav-menu items to never go below the logo element*/
}
.logo{
width: 150px;
height: 40px;
position: absolute;
left: 50%;
background-color: green;
transform: translateX(-50%);
}
<div class="parent">
<div class="nav-menu"> Your Menu</div>
<div class="logo"></div>
<div class="icons">Your Icons</div>
</div>
You can simply get the logo out you nav so that all three, logo, nav and icons become flex items and justify header's content with space-between. Below is the simplified code.
P.S. - Share the rendered code as your implementation in future and not JSX/SASS
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
}
.container .header {
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
color: #fff;
background-color: black;
}
.container .header .user-nav {
display: flex;
align-items: center;
}
.container .header .user-nav-item {
padding: 1.5rem;
cursor: pointer;
}
.container .header .user-nav-item-link {
text-decoration: none;
color: white;
}
.container .header .user-nav-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
}
.container .header .user-nav-icon > * {
padding: 0 0.8rem;
cursor: pointer;
}
.container .header .user-nav-icon-icon-notification {
color: red;
}
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<a class="user-nav-item-link">Overview</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Search</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Feed</a>
</div>
</nav>
<h3 class="logo">Logo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
Bell
</div>
<div class="user-nav-icon-box">
Settings
</div>
</div>
</header>
</div>
Here is an answer using display: flex; Flexbox is best & elegant to align items to mid of the page without cheesy computations by Margin, Transform,...
<html>
<head>
<style>
*, .container {
width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
color: ivory;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 13px;
}
.header {
display: flex;
align-items: center;
padding: 10px;
background-color: gray;
}
.user-nav {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
.user-nav-item {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
}
.user-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<Link href="/">
<a class="user-nav-item-link">Overview</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/search">
<a class="user-nav-item-link">Search</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/feed">
<a class="user-nav-item-link">Feed</a>
</Link>
</div>
</nav>
<h3 class="logo">Logoooooooooooooooooooooo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div class="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
</body>
</html>