I'm building a forum with flexbox. But I've got a problem. How do I wrap the text from a column to a new line?
Here is my example simulated:
https://jsbin.com/bijikimubu/1/edit?html,css,js,output
Also somewhere else on my site:
--EDIT--
With word-break: break-all; it looks like this in IE 11:
check this
footer {
background: #f00;
}
margin-top auto,
.Footer__body {
height: 70px;
}
.Footer__bar {
height: 10px;
}
.Container {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 100vh;
}
ul.Navigation__body {
padding-left: 0;
}
ul {
margin: 0px;
}
.Navigation__top {
list-style: none;
text-decoration: none;
background: #fde428;
height: 10px;
}
.Navigation__body {
display: flex;
list-style: none;
text-decoration: none;
color: #fff;
background: #002e5b;
border-bottom: 1px solid #fff;
}
.Navigation__item {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-flex: 1;
flex: 1;
cursor: pointer;
}
/* Main section */
.Center {
display: flex;
align-items: center;
justify-content: center;
}
.Row {
display: flex;
max-width: 1000px;
margin: auto;
}
.Forum {
margin-top: 50px;
margin-bottom: 10px;
padding: 0px;
background: #fff;
height: 375;
width: 100%;
border: 1px solid #eaeaea;
}
.Forum__body {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
min-width: 100%;
height: 100%;
width: 35%;
}
.Forum__item__body {
display: -webkit-box;
display: flex;
justify-content: space-around;
border-bottom: 1px solid #eaeaea;
-webkit-box-align: center;
align-items: center;
cursor: pointer;
}
.Forum__item__body_content p{
word-wrap:break-word;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="Container">
<header>
<div class="Navigation">
<div class="Navigation__top"></div>
<nav v-show="authenticated">
<ul class="Navigation__body">
<li class="Navigation__item" v-link="{ name: 'Forums' }">
<p>Home</p>
</li>
<li class="Navigation__item" v-link="{ name: 'EditProfile', params: { user: user.slug }}">
<p>Profiel</p>
</li>
<li class="Navigation__item" v-link="{ name: 'Subscription' }">
<p>Abonnementen</p>
</li>
<li class="Navigation__item" v-link="{ name: 'Corporations' }">
<p>Corporaties</p>
</li>
<li class="Navigation__item" v-link="{ name: 'Users' }">
<p>Gebruikers</p>
</li>
<li class="Navigation__item" #click="destroyLogin">
<p>Uitloggen</p>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="Row Center">
<div class="Forum ">
<p class="Forum__title">Name</p>
<div class="Forum__item__body_content">
<p>DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription
DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription</p>
</div>
</div>
</div>
<div class="Loader" v-if="loading">
<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
</div>
</main>
<footer>
<div class="Footer">
<div class="Footer__body">
<p>© Company</p>
</div>
<div class="Footer__bar"></div>
</div>
</footer>
</div>
</body>
</html>
I have changed your markup a bit and css too
Hope this helps
PS:This styles are in css
Related
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.
I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
height:30px;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 5px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 700px){
.toggle-button{
display:flex;
}
.menu-bar-links{
/* display:none; */
width:100%;
}
.menu-bar{
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul{
width:100%;
flex-direction: column;
}
.menu-bar-links li{
text-align: center;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
This is my HTML Code:
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- <div class= "grid">
</div> -->
</body>
</html>
This is how it looks when in full screen:
When i rearrange the screen it looks like this:
As you can see all the buttons seems to have disappeared except the one which is hovered over
It is also not centering even with
.menu-bar-links li{
text-align: center;
The problem you have is that you have a fixed height on your .menu-bar, namely height: 30px. You're better off removing that, adding some padding for presentation and making the .menu-bar element a flex container.
Link to CodePen:
https://codepen.io/thechewy/pen/QWQQMjg
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu-bar {
background: #273044;
text-align: center;
/* height: 30px; */
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
place-items: center;
display: grid;
padding: 5px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #0b56ab;
height: auto;
height: 30px;
}
.toggle-button {
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 700px) {
.toggle-button {
display: flex;
}
.menu-bar-links {
/* display:none; */
width: 100%;
}
.menu-bar {
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul {
width: 100%;
flex-direction: column;
}
.menu-bar-links li {
text-align: center;
}
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<body>
<div class="menu-bar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
I want to get this effect:
https://zapodaj.net/b589e3e13aade.png.html
But unfortunately something like this comes out to me, I am already tired of it with 3 hours someone can help?
body {
list-style: none;
}
.wrapper {
display: flex;
justify-content:center;
}
.wrapper3 {
display: flex;
}
.click {
border-radius: 4px;
background-color: red;
padding: 19px 24px;
cursor: pointer;
text-decoration: none;
color: white;
font-size: 15px;
font-weight: 600;
line-height: 19px;
text-align: center;
text-transform: uppercase;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content2{
display:flex;
align-items:center;
}
<div class="wrapper">
<div class="content">
<li class="click"> <a class="box" href="#">Skorzystaj z ofert! </a></li>
<div class="wrapper3">
<li class="click2"> <a class="box" href="#">Informacje | </a></li>
<li class="click3"> <a class="box" href="#">Kontakt</a></li>
</div>
</div>
<div class="content2">
<li class="click4"> <a class="box" href="#">Zaloguj</a></li>
</div>
</div>
The "Login" button does not center as it should
Just give some height to the div with class name wrapper. As shown in the code below.
body {
list-style: none;
border: 1px solid black;
}
.wrapper {
/* Give Some height to this wrapper */
height: 125px;
border: 1px solid green;
display: flex;
justify-content: center;
}
.wrapper3 {
display: flex;
}
.click {
border: 1px solid blue;
border-radius: 4px;
background-color: red;
padding: 19px 24px;
cursor: pointer;
text-decoration: none;
color: white;
font-size: 15px;
font-weight: 600;
line-height: 19px;
text-align: center;
text-transform: uppercase;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content2 {
display: flex;
align-items: 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">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<li class="click"> <a class="box" href="#">Skorzystaj z ofert! </a></li>
<div class="wrapper3">
<li class="click2"> <a class="box" href="#">Informacje | </a></li>
<li class="click3"> <a class="box" href="#">Kontakt</a></li>
</div>
</div>
<div class="content2">
<li class="click4"> <a class="box" href="#">Zaloguj</a></li>
</div>
</div>
</body>
</html>
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 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>