the section #portfolio slips under the section #team-container when resizing the page to a smaller width
the website should show up like this: https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/example-site/index.html#team
Despite that what would you do to make the code better?
HTML:
<html><head>
<title>VC Enterprise Portfolio</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<link rel="shortcut icon" href="/tiefes-lernen.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lexend+Mega" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<h1>The VC Experience</h1>
<div class="navbar">
<p>Mission Statement</p>
<p>Portfolio</p>
<p>Investment Team</p>
</div>
</div>
<div class="main">
<div class="mission">
<div class="content">
<h2>The VC Experience</h2>
<h4>Our fund is committed to the furthering entrepreneurs in the mobility sector.</h4>
</div>
</div>
<div id="portfolio">
<div class="content">
<h2>Our Mobility Portfolio</h2>
<h4>Impacting diverse sectors of mobility to better the human experience and the world we inhabit</h4>
<div class="companies">
<div class="company">
<img src="img URL">
<span>AeroArgonauts</span>
</div>
<div class="company">
<img src="img URL">
<span>AutoBueno</span>
</div>
<div class="company">
<img src="img URL">
<span>LaneChatter</span>
</div>
<div class="company">
<img src="img URL">
<span>TigerTreads</span>
</div>
<div class="company">
<img src="img URL">
<span>ValetToday</span>
</div>
</div>
</div>
</div>
<div id="team-container">
<h2>Our Team</h2>
<div class="team">
<div class="teammate">
<img src="img URL">
<h3>Lisa Fischer</h3>
<p>C.E.O. - Founder and Principal Investor</p>
</div>
<div class="teammate">
<img src="img URL">
<h3>Alex Lasker</h3>
<p>Partner - Research & Development</p>
</div>
<div class="teammate">
<img src="img URL">
<h3>Omar Carlsen</h3>
<p>Partner - Partnerships & Marketing</p>
</div>
</div>
</div>
<div class="contact">
<h2>The VC Experience</h2>
<h5>introduction#vcexperience.investors</h5>
<h5>555-867-5309</h5>
</div>
<div class="copyright">
<h5>copyright VC Enterprises 2020</h5>
</div>
</div>
</body></html>
CSS:
/*https://content.codecademy.com/PRO/independent-practice-projects/flexbox-business-site/img/skyscrapers.jpg*/
html {
display: block;
}
body {
font-family: "Lexend Mega", sans-serif;
}
h1 {
display: block;
margin-top: .75em;
font-size: 2.75rem;
}
.navbar {
display: flex;
justify-content: space-around;
font-size: 1.375rem;
margin: 0 10%;
}
.navbar p{
padding: 0 15px 10px 30px;
display: inline-block;
}
a {
color: black;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
body {
text-align: center;
}
.navbar {
justify-content: space-around;
margin: 0 10px;
display: flex;
}
.mission {
display: flex;
background-image: img URL;
width: auto;
padding-top: 10px;
}
.content {
display: block;
width: 100%;
height: 300px;
position: relative;
top: 80px;
margin-bottom: 0;
}
h2, h4 {
background-color: white;
position: relative;
font-size: 33px;
margin: 0;
padding: 10px;
}
h4 {
font-size: 22px;
}
#portfolio {
min-height: 500px;
margin: auto;
padding-top: 35px;
}
.company {
display: flex;
align-items: center;
justify-content: space-between;
}
.company img {
width: 200px;
height: auto;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
span {
min-width: 240px;
padding: 5px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.companies {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#team-container {
position: relative;
display: block;
}
#team-container h2 {
margin: 0;
padding: 5px;
display: block;
}
.team {
padding-top: 75px;
justify-content: center;
display: flex;
flex-wrap: wrap;
background-image: img URL;
}
.team img {
padding: 10px;
height : 300px;
width: 200px;
}
.teammate {
padding: 5px;
color: white;
flex-basis: 280px;
}
Tried to make some paddings to top or bottom but it looks whacky. I also tried to inspect the original site but can't find the reason why.
Related
import "./portfolio.scss"
export default function portfolio() {
return (
<div className="portfolio" id="portfolio">
<h1>Portfolio</h1>
<ul>
<li className="active">Featured</li>
<li>Web app</li>
<li>Mobile app</li>
<li>Design</li>
<li>Branding</li>
</ul>
<div className="container">
<div className="item">
<img
src="assets/default-product-image.png"
alt="" />
<h3>Coming soon</h3>
</div>
<div className="container">
<div className="item">
<img
src="assets/default-product-image.png"
alt=""/>
<h3>Coming soon</h3>
</div>
<div className="container">
<div className="item">
<img
src="assets/default-product-image.png"
alt=""/>
<h3>Coming soon</h3>
</div>
</div>
</div>
</div>
</div>
)
}
This is my .jsx I am making div's with containers in them and the containers seem to not be aligned properly, see the picture below.
I am trying to get them all aligned with even margin but the third one seems to be off, when i change the device on which i view it tho they align perfectly below each other.
and this is my scss
#import "../../global.scss";
.portfolio{
background-color: lightblue;
display: flex;
flex-direction: column;
align-items: center;
h1{
font-style: 500px;
}
ul{
margin: 10px;
padding: 0;
list-style: none;
display: flex;
li{
font-size: 14px;
margin-right: 9px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
&.active{
background-color: $mainColor;
color: white;
}
}
}
.container{
width: 70%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.item{
width: 220px;
height: 150px;
border-radius: 20px;
border: 1px solid rgb(240, 234, 234);
margin: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
h3{
position: absolute;
font-style: 20px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
&:hover{
background-color: $mainColor;
img{
opacity: 0;
z-index: 0;
}
}
}
}
}
This is what it looks like right now I want the items to be evenly spread apart.
The way you have the <div class='container'>s nested is probably what is causing misalignment. I don't see any images in your question, but I'm willing to bet your code is producing containers that get smaller and smaller the further down the tree it gets, which is exaggerated on small screens.
Start by closing your container divs before opening another. Also, use consistent indentation - that will help make this issue more obvious when you're reading your code. I have cleaned up your code and changed nothing except the HTML markup. The top example in the linked pen has cleaned up markup, while the bottom example has the containers grouped.
https://codepen.io/the_Northway/pen/QWqapbg?editors=1100
.portfolio {
background-color: lightblue;
display: flex;
flex-direction: column;
align-items: center;
}
.portfolio#portfolio_fixed {
background-color: orange;
}
.portfolio h1 {
font-style: 500px;
}
.portfolio ul {
margin: 10px;
padding: 0;
list-style: none;
display: flex;
}
.portfolio ul li {
font-size: 14px;
margin-right: 9px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
}
.portfolio ul li.active {
background-color: #445566;
color: white;
}
.portfolio .container {
width: 70%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.portfolio .container .item {
width: 220px;
height: 150px;
border-radius: 20px;
border: 1px solid #f0eaea;
margin: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
}
.portfolio .container .item h3 {
position: absolute;
font-style: 20px;
}
.portfolio .container .item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}
.portfolio .container .item:hover {
background-color: #445566;
}
.portfolio .container .item:hover img {
opacity: 0;
z-index: 0;
}
<div class="portfolio" id="portfolio_fixed">
<h1>Portfolio</h1>
<ul>
<li class="active">Featured</li>
<li>Web app</li>
<li>Mobile app</li>
<li>Design</li>
<li>Branding</li>
</ul>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt="" />
<h3>Coming soon</h3>
</div>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
</div>
</div>
<div class="portfolio" id="portfolio_broken">
<h1>Portfolio</h1>
<ul>
<li class="active">Featured</li>
<li>Web app</li>
<li>Mobile app</li>
<li>Design</li>
<li>Branding</li>
</ul>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt="" />
<h3>Coming soon</h3>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
<div class="container">
<div class="item">
<img src="assets/default-product-image.png" alt=""/>
<h3>Coming soon</h3>
</div>
</div>
</div>
</div>
</div>
Good morning,
I am having a challenge with centering a flexbox container itself. I have managed to center all 5 elements within the flexbox but cannot actually get the container itself to center horizontally into the middle of the page.
I have watched a tutorial after getting stuck on this and can see my code is the same except for the naming of containers. Timestamp provided for the exact second where you can see their code: https://youtu.be/fJc18fT4T3s?t=542. In their tutorial, the "trend-container" which is my "image-container" is centered whereas mine is not. I have tried using margin: 0 auto; but this does nothing and the container stays on the left side of the page.
I have had to add text-align: center to mine as the text was not aligning.
If anyone can advise what I have done wrong to not allow this flexbox container to center that would be great as I am a bit stumped!
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
Changing display: inline-flex to display: flex and adding margin: 0 auto to the <div class="image-container"> container fixes the center alignment issue for that section of the page.
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
for "image-container" the parent that is "body" is not a flex or grid item. quick fix set: body to be a flex container and "flex-direction to column, then for "image-container" set "align-self: center;" like so:
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
display: flex;
flex-direction: column;
}
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
}
when i resize the window the header moves to the left. And the flexbox dont stay in the center.And sorry im new to stackoverflow so i forgive my mistakes.see this image for a better understanding
(Please skip this text cause stackoverflow is blocking my post jdjdjd sksjdhd sisjjdjd didjjd sidjf sijdjd sidjjd idjdjd idjdjjd)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Md Hasan</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="header-left">
<a href="#"
><img
class="logo"
src="gallery/received_344045126587298.jpeg"
width="100px"
height="70px"
alt="logo"
/>
</a>
<a href="#">
<h1>Md Hasan</h1>
</a>
</div>
<div class="header-right">
Contact
Gallery
</div>
</header>
<div class="container">
<section id="about">
<div class="aboutText">
<div class="f1">
<h1>Who Is Hasan</h1>
<p>
Hasan is a Business man. He runs a Rubber Factory. He is a Good
person with a kind Heart. This website is just a gift for him
</p>
</div>
<div class="f2">
<a
href="https://www.facebook.com/messages/t/100011445344575"
target="_blank"
><button id="btn" onmouseout="btnf()" onmouseover="btnfuc()">
DM Hasan on FB
</button></a
>
</div>
</div>
<div class="aboutImg">
<img src="gallery/hasan.jpg" alt="About Hasan" class="aboutImg" />
</div>
</section>
<hr />
<section id="gallery">
<h1>Gallery</h1>
<p>Here you can see some rare pictures of Living Legend Md Hasan</p>
<div class="flex">
<img src="gallery/IMG20180305171539.jpg" alt="" />
<img src="gallery/IMG20180616172814.jpg" alt="" />
<img class="im3" src="gallery/IMG_20190404_201412.jpg" alt="" />
</div>
</section>
<hr />
<section id="contact">
<h1>Contact Us</h1>
<p>
<i>Need Hasan's Facebook Id? ok here you go.</i>
<a href="https://www.facebook.com/profile.php?id=100011445344575">
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="fb-link"
/>
Md Hasan
</a>
</p>
</section>
</div>
<footer class="footer">
<em class="em1"
>Created by - Ahmed Rafin | I'm a professional. Please give me Job.</em
>
<em class="em2">
<a href="https://facebook.com/psycho.rafin"
>Contact Me on
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="" /></a
></em>
</footer>
<script>
btnfuc = () => {
console.log('button hovered');
document.getElementById('btn').style.backgroundColor = 'red';
};
btnf = () => {
document.getElementById('btn').style.backgroundColor = 'blueviolet';
};
</script>
</body>
</html>
now this is the css part . you can check this . and again sorry if my mistakes guys
* {
margin: 0;
padding: 0;
}
/* Header section start from here */
header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
overflow: auto;
}
header .header-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-basis: 50%;
}
header .logo {
border-radius: 50%;
margin: 10px;
}
.header-left a {
text-decoration: none;
color: white;
}
header a:hover {
color: grey;
}
.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right a {
margin: 10px;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 10px;
}
.header-right a:hover {
color: black;
background-color: yellowgreen;
}
/* Header section end */
/* Container and after that about hasan section */
.container {
width: 90%;
margin: auto;
}
#about {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px;
}
.aboutText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section .aboutImg {
width: 500px;
height: auto;
border-radius: 10px;
}
section .aboutText {
width: 50%;
}
#about h1 {
font-size: 50px;
text-align: center;
margin-bottom: 15px;
}
#about p {
font-size: 18px;
font-style: italic;
}
#about button {
padding: 10px 30px;
background-color: rgb(61, 61, 230);
margin: 25px auto;
font-size: 18px;
}
/* About section end */
/* Gallery section starts */
#gallery h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#gallery p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
section .flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex img {
margin: 5px;
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 5px;
}
.flex img:nth-child(3) {
transform: rotate(-90deg);
}
/* Gallery section end */
/* Contact us page */
#contact h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#contact p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
#contact img {
width: 50px;
height: auto;
position: relative;
top: 13px;
}
#contact a {
text-decoration: none;
color: rgb(70, 21, 21);
}
#contact a:hover {
color: green;
}
/* now the last foooter area */
footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
}
footer em {
color: white;
font-size: 15px;
padding: 30px;
}
footer img {
width: 30px;
height: auto;
position: relative;
top: 5px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
color: green;
}
/* end for computers and now media queries */
#media screen and (max-width: 1200px) {
header {
flex-direction: column;
justify-content: center;
/* align-items: center; */
}
}
Please try this code, To Why flexbox is moving left when i resize the window
html {
background-color: #141E30;
margin: 0;
padding: 0;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
top: 0;
bottom: 0;
position: fixed;
overflow: auto;
background: #0a0c0f;
color: #EAE9E9;
}
.sidebar__profile {
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar__menuitem {
padding-bottom: 10px;
display: flex;
align-items: center;
flex-shrink: 0;
height: 30px;
}
.count {
margin-left: auto;
margin-right: 20px;
border-radius: 6px;
padding: 2px 5px;
background-color: #EAE9E9;
color: #0a0c0f;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
</head>
<body>
<div class="sidebar">
<div>
<div class="sidebar__profile">
<img src="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg" height=50px alt="image" class="sidebar__profile__avatar" />
<div class="sidebar__profile__name">User Name</div>
</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 1</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 2</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 3</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 4</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 5</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 6</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 7</div>
<div class="count">2</div>
</div>
</div>
</body>
</html>
I hope this code will be useful to you.
Thank you.
this is your code. What exactly is the problem? looks good from here.
btnfuc = () => {
document.getElementById('btn').style.backgroundColor = 'red';
};
btnf = () => {
document.getElementById('btn').style.backgroundColor = 'blueviolet';
};
* {
margin: 0;
padding: 0;
}
/* Header section start from here */
header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
overflow: auto;
}
header .header-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-basis: 50%;
}
header .logo {
border-radius: 50%;
margin: 10px;
}
.header-left a {
text-decoration: none;
color: white;
}
header a:hover {
color: grey;
}
.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right a {
margin: 10px;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 10px;
}
.header-right a:hover {
color: black;
background-color: yellowgreen;
}
/* Header section end */
/* Container and after that about hasan section */
.container {
width: 90%;
margin: auto;
}
#about {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px;
}
.aboutText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section .aboutImg {
width: 500px;
height: auto;
border-radius: 10px;
}
section .aboutText {
width: 50%;
}
#about h1 {
font-size: 50px;
text-align: center;
margin-bottom: 15px;
}
#about p {
font-size: 18px;
font-style: italic;
}
#about button {
padding: 10px 30px;
background-color: rgb(61, 61, 230);
margin: 25px auto;
font-size: 18px;
}
/* About section end */
/* Gallery section starts */
#gallery h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#gallery p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
section .flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex img {
margin: 5px;
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 5px;
}
.flex img:nth-child(3) {
transform: rotate(-90deg);
}
/* Gallery section end */
/* Contact us page */
#contact h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#contact p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
#contact img {
width: 50px;
height: auto;
position: relative;
top: 13px;
}
#contact a {
text-decoration: none;
color: rgb(70, 21, 21);
}
#contact a:hover {
color: green;
}
/* now the last foooter area */
footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
}
footer em {
color: white;
font-size: 15px;
padding: 30px;
}
footer img {
width: 30px;
height: auto;
position: relative;
top: 5px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
color: green;
}
/* end for computers and now media queries */
#media screen and (max-width: 1200px) {
header {
flex-direction: column;
justify-content: center;
/* align-items: center; */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Md Hasan</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="header-left">
<a href="#"
><img
class="logo"
src="gallery/received_344045126587298.jpeg"
width="100px"
height="70px"
alt="logo"
/>
</a>
<a href="#">
<h1>Md Hasan</h1>
</a>
</div>
<div class="header-right">
Contact
Gallery
</div>
</header>
<div class="container">
<section id="about">
<div class="aboutText">
<div class="f1">
<h1>Who Is Hasan</h1>
<p>
Hasan is a Business man. He runs a Rubber Factory. He is a Good
person with a kind Heart. This website is just a gift for him
</p>
</div>
<div class="f2">
<a
href="https://www.facebook.com/messages/t/100011445344575"
target="_blank"
><button id="btn" onmouseout="btnf()" onmouseover="btnfuc()">
DM Hasan on FB
</button></a
>
</div>
</div>
<div class="aboutImg">
<img src="gallery/hasan.jpg" alt="About Hasan" class="aboutImg" />
</div>
</section>
<hr />
<section id="gallery">
<h1>Gallery</h1>
<p>Here you can see some rare pictures of Living Legend Md Hasan</p>
<div class="flex">
<img src="gallery/IMG20180305171539.jpg" alt="" />
<img src="gallery/IMG20180616172814.jpg" alt="" />
<img class="im3" src="gallery/IMG_20190404_201412.jpg" alt="" />
</div>
</section>
<hr />
<section id="contact">
<h1>Contact Us</h1>
<p>
<i>Need Hasan's Facebook Id? ok here you go.</i>
<a href="https://www.facebook.com/profile.php?id=100011445344575">
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="fb-link"
/>
Md Hasan
</a>
</p>
</section>
</div>
<footer class="footer">
<em class="em1"
>Created by - Ahmed Rafin | I'm a professional. Please give me Job.</em
>
<em class="em2">
<a href="https://facebook.com/psycho.rafin"
>Contact Me on
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="" /></a
></em>
</footer>
</body>
</html>
I do not know what to do for it to work. I have been trying to make some stuff more specific and others more generalised yet it isnt working.
Please check my code and any advice or help is much appreciated
(it isn't letting me post it 'cause its mostly code so im just gonna put letters)
kkkkkkkkkkk
kkkkkkkkkkk
kkkkkkkkkkk
<!DOCTYPE html>
<html>
<head>
<title>Secret Agent Supply Inc.</title>
<link type="text/css" rel="stylesheet" href="./resources/reset.css">
<link type="text/css" rel="stylesheet" href="./resources/style.css">
</head>
<body>
<div class="company background-black">
<div class="nine-w container">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/logo.png">
<span>SECRET AGENT SUPPLY INC.</span>
</div>
</div>
<div class="banner">
<div class="nine-w">
<div class="banner-content background-black">
<h2>NEW ARRIVAL</h2>
<h1>SPORT BIKES AND MOTORCYCLES</h1>
</div>
</div>
</div>
<nav>
<div class="nine-w">
<ul class="desktop">
<li>Eyewear</li>
<li>Apparel</li>
<li>Gadgets</li>
<li>Vehicles</li>
<li>Classes</li>
<li>Contact</li>
</ul>
<ul class="mobile">
<li>Menu</li>
</ul>
</div>
</nav>
<div class="content">
<div class="images nine-w">
<div class="image-item">
<div class="image-div">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/pen.png">
</div>
<span class="background-black">Exploding Pen</span>
</div>
<div class="image-item">
<div class="image-div">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/watch.png">
</div>
<span class="background-black">Cellular Watch</span>
</div>
<div class="image-item hide">
<div class="image-div">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/secret-agent-supply/resources/images/glasses.png">
</div>
<span class="background-black">Thermal Glasses</span>
</div>
</div>
<div class="below nine-w">
<div class="below-images">
<span class="background-black">Location</span>
<p>-47.346436, 84.32354</p>
</div>
<div class="below-images">
<span class="background-black">Location</span>
<p>0800 - 1800</p>
</div>
</div>
</div>
<footer class="background-black">
<div class="nine-w">Copyright Secret Agent Supply Inc.</div>
</footer>
</body>
</html>
CSS
html{
font-size: 18px;
color: white;
font-family: Helvetica;
}
.nine-w{
max-width: 960px;
margin: 0 auto;
}
.background-black{
background-color: black;
}
.company .nine-w{
display: flex;
align-items: center;
padding: 0.66rem 0;
}
.company img{
height: 1.5rem;
padding: 0 1rem 0 0;
}
.company span{
font-size: 1rem;
}
.banner{
height: 25rem;
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/moto.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner-content{
max-width: 20rem;
padding: 2rem 3rem;
position: relative;
top: 9rem;
}
h2{
font-size: 1rem;
font-weight: bold;
padding-bottom: 0.25rem;
}
h1{
font-weight: bold;
font-size: 2rem;
}
nav{
background-color: firebrick;
}
nav ul{
display: flex;
align-items: center;
justify-content: space-between;
background-color: firebrick;
padding: 0.75rem 0;
}
.images{
display: flex;
justify-content: space-between;
}
.image-item{
width: 30%;
display: flex;
flex-direction: column;
border: 4px solid black;
margin-top: 3rem;
}
.image-div{
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.image-item img{
max-width: 8rem;
}
.image-item span{
display: block;
text-align: center;
padding: 0.5rem 0;
}
.below{
display: flex;
justify-content: space-between;
margin-top: 3rem;
}
.below-images{
width: 35%;
margin-bottom: 4rem;
}
.below-images span{
display: block;
padding: 1rem 0 1rem 2rem;
}
.below-images p{
color: black;
}
footer{
padding: 5rem 0;
}
.mobile{
display: none;
}
#media only screen and (max-width: 470px){
.banner-content h2{
font-size: 0.77rem;
}
.banner-content h1{
font-size: 1rem;
}
.banner-content{
padding: 1rem 2rem;
top: 10rem;
}
.banner{
height: 15rem;
}
}
#media only screen and (max-width: 1024px){
.hide{
display: none;
}
.image-item{
width: 47%;
}
.desktop{
display: none;
}
.mobile{
display: block;
text-align: center;
}
.banner-content h1{
font-size: 1.5rem;
}
}
i expected for the media query to work when making my screen 470px or smaller, yet it isnt
Your media queries are in the wrong order - just reverse their order: max-width: 470px should be after max-width: 1024px. The way you have them now, the second one will overwrite the first one, because whatever is less than 470px wide is also less than 1024px wide.
Your code is working fine. I've set the background color of your banner-content to red in this example. It will work if your viewport width is less than 470px;
.banner-content{
padding: 1rem 2rem;
top: 10rem;
background: red
}
https://codepen.io/seyyedmojtaba72/pen/QRYEjd
I am trying to align h2 to the left and edit to the right using flex-box. I followed the approach here and used justify-content property but still no success. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.ReviewBlock__Main {
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
max-width: 70rem;
margin: 5rem auto;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main {
flex-direction: row;
}
}
.ReviewBlock__Main__Section {
border-style: solid;
border-width: 1px;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 10px;
width: 95%;
display: flex;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main__Section {
width: 33%;
margin: 10px;
padding: 10px;
}
}
.ReviewBlock__Main__Section__TitleBlock {
display: flex;
justify-content: space-between;
}
.ReviewBlock__Main__Section__TitleBlock__Title {
font-weight: bold;
margin: 5px auto 15px 15px;
}
.ReviewBlock__Main__Section__TitleBlock__Edit {
margin: auto;
}
</style>
</head>
<body>
<div class="ReviewBlock">
<div class="ReviewBlock__Main">
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
</span>
</div>
</section>
</div>
</body>
</html>
You have to give your div in the section width: 100%.
.ReviewBlock__Main {
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
max-width: 70rem;
margin: 5rem auto;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main {
flex-direction: row;
}
}
.ReviewBlock__Main__Section {
border-style: solid;
border-width: 1px;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 10px;
width: 95%;
display: flex;
}
#media screen and (min-width: 640px) {
.ReviewBlock__Main__Section {
width: 50%;
margin: 10px;
padding: 10px;
}
}
.ReviewBlock__Main__Section__TitleBlock {
display: flex;
justify-content: space-between;
}
.ReviewBlock__Main__Section > div {
width: 100%;
}
.ReviewBlock__Main__Section__TitleBlock__Title {
font-weight: bold;
margin: 5px auto 15px 15px;
}
.ReviewBlock__Main__Section__TitleBlock__Edit {
margin: auto;
}
<div class="ReviewBlock">
<div class="ReviewBlock__Main">
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Shipping information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Billing information</h2>
<a class="ReviewBlock__Main__Section__TitleBlock__Edit" href="#">Edit</a>
</span>
</div>
</section>
<section class="ReviewBlock__Main__Section">
<div>
<span class="ReviewBlock__Main__Section__TitleBlock">
<h2 class="ReviewBlock__Main__Section__TitleBlock__Title">Order Summary</h2>
</span>
</div>
</section>
</div>