Due to the html markup I had to use flex-basis to improve style, so that p element start from the same column as the title/headline, and problem was fixed using flex-basis.
But as you can see in the screenshot, the image takes too much height and width.
I tried to fix it applying max-height and max-width, but it breaks my style.
And my goal is to remove that space so that i can control the space between the content and button.
Note: I can't use css grid. I know, it would be easier, but there are problems on ios using css grid.
Here is the sandbox link and code snippet below
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.logo-image {
flex-basis: 100%;
object-fit: contain;
object-position: top;
padding-top: 10px;
order: 1;
align-self: flex-start;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
]3 and code
First, remove flex-basis on .logo-image.
Then put h4.headline and your img in its own .wrapper and add display: flex; to it. Then just set img { max-width: 100%;) so that your image resizes appropriately in the container.
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: flex;
}
.logo-image {
object-fit: contain;
object-position: top;
padding-top: 10px;
align-self: flex-start;
}
.headline {
color: white;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
padding-left: 10px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<div class="wrapper">
<h4 class="headline">
Block Title
</h4>
<div>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate
</p>
</div>
</div>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>
Can't you make the image position:absolute so you wont need flex-box
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
position: relative;
padding-left: 4rem;
}
.logo-image {
position: absolute;
left: 0;
top: 0;
}
.headline {
color: white;
order: 2;
margin:0 0 0.5rem;
}
.text {
color: white;
font-size: 16px;
margin:0 0 10px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
</html>
Related
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 am currently trying to make a sidebar, which has an 'X' button at the top right corner. I tried to use float: right in order to place it on the right but it doesn't work.
The anchor that I used for the cross is within a div, but I don't know why it doesn't seem to work. I don't think the css with .side-nav .btn-close contains the problem.
I think there's something wrong with the side-nav class.
*{
box-sizing: border;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
float:right;
margin-right:25px;
}
<!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="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
×
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
I have modified your code a little. It should work now.
I have added wrapper div to your button and the ul in sidebar. Since you are using position:fixed on .side-nav, you have to use position: absolute on the X Button.
* {
box-sizing: border;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color: white;
}
.navbar-links ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a {
text-decoration: none;
color: white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display: flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color: white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
float: right;
margin-right: 25px;
}
/* Added These 2 Wrapper class */
.btn-close-wrapper {
position: absolute;
display: block;
width: 100%;
text-align: right;
}
.ul-wrapper {
padding-top: 50px;
}
<!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="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
<!-- Used wrapper div for close button and ul -->
<div class="btn-close-wrapper">
×
</div>
<div class="ul-wrapper">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
It is simply because float doesn't work on flex items. Your .side-nav has the display of flex. If you change it to block, it will work.
But my suggestion is not to use float at all. Because float is mainly for old newspaper-like text-image combination and using it to "structure the elements" was just a hack because of the lack of the flex-box.
So either stick with one of them (float or flex-box) Or better: make the close icon an absolutely positioned element to get it out of the flow:
*{
box-sizing: border-box;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
margin-right:25px;
position: absolute;
right: 0;
}
<!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="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
×
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
ALSO: Notice that box-sizing: border-box; is correct, not box-sizing: border;
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want to know why the video and the second container don't center in the middle of the page when I gave it the justify-content as you see in the third and fourth container the boxes align in the middle.
I tried everything, from margin to float to grid, but it's not working.
Again sorry for the question but I'm a beginner in this game.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
In your CSS for the main identifier, you have flex-direction: column; so you need align-items: center;, not justify-content: center;. Also, I love this resource on Flexbox.
align-items is used for the "cross axis" (if you're adding elements in the column flex direction, the cross axis is the horizontal, and you want your stuff centered horizontally; justify-contents follows the direction axis so it would be trying to center things vertically).
Here's the updated chunk of code in question:
/* ... other styles were above ... */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center; /* don't need this */
align-items: center;
}
/* ... there's more stuff below ... */
Your flex direction is column - so you need to use align-items: center instead.
justify-content: center centers elements in the direction of the flex-flow. align-items aligns flex children on the cross axis of the direction (in this case column).
If your flex-direction was row - align-items: center would vertically center the flex children, since it's the cross axis of the main flex direction.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
justify-content:center is working. It's just centering it to the width of the container that's set to 900px
.video-container {
//this width
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
Change width to 100% and it will work fine
I have the same images set up within a container. I have set up a width (it´s suppose that this has to apply both of them) but in the end the right one looks bigger BUT this happens when it gets to the #media (min-width:1024px). I believe this is related with responsive. While we have the images under that size and in display: block is OK. When it turns display:flex the problem begins. Please anybody help me with this issue. It doesn´t has any sense. (evidence attached)
HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<title>Balance-Salud Mental</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-
scale=1, minimun-scale=1"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesiones
adecuados. "/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap"
rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap"
rel="stylesheet"/>
</head>
<body>
<header>
<div class="contenedor">
<a href="index.html">
<img src="img/logo.png" class="brand" alt="Salud Mental Peru">
</a>
<input type="checkbox" id="menu-bar">
<label class="icon-menu-outline" for="menu-bar"></label>
<nav class="menu">
¿Quienes Somos?
Nuestros Profesionales
Consultas y Citas
Artículos
</nav>
</div>
</header>
<main>
<section id=profesionales>
<h2>Conócenos</h2> <br>
<div class="contenedor">
<div class="doctor">
<h3>Manuel Mallqui Babilon</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti sed distinctio
dolore. Veniam dicta error officiis sed. Aut, mollitia.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
<div class="doctor">
<h3>Manuel Mallqui Ñamot</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, vero ex accusamus
temporibus maiores esse nihil facilis iusto laudantium aliquid.</p>
<img src="img/foto2.jpg" alt=""/>
</div>
</div>
</section>
</main>
<footer>
<div class="contenedor">
<p>2018-2020 Balance Salud Mental © - Designed by Watermelon</p>
</div>
</footer>
</body>
</html>
CSS CODE
#import url(menu.css);
#import url(slider.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152'
height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff'
fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-
42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82
30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-
18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54
0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-
2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30
50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header {
width: 100%;
height: 80px;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.contenedor {
width: 98%;
margin: auto;
}
.brand {
width: 160px;
margin: 3px 10px;
}
section {
width: 100%;
margin-bottom: 25px;
}
/*QUIENES SOMOS*/
#quienes_somos {
text-align: center;
margin-top: 100px;
padding: 20px;
}
/*NUESTROS PROFESIONALES*/
#profesionales {
border: 1px solid red;
text-align: center;
margin-top: 100px;
}
#profesionales .contenedor {
border: 1px solid black;
display: block;
justify-content: center;
}
.doctor {
margin: 20px;
}
.doctor img {
width: 100%;
max-width: 500px;
padding: 10px;
}
/*FOOTER*/
footer .contenedor {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
font-size: small;
margin-bottom: 50px;
margin-top: 250px;
}
#media (min-width:1024px) {
.contenedor {
width: 1000px;
}
#profesionales .contenedor {
display: flex;
}
}[enter image description here][1]
The images' width is 100%, but the width of their siblings <p></p> is not set. The content of two <p> has different length. That is why they make the widths of their parents <div class="doctor> different.
The solution could be to add to the .doctor rule a new one: width: 50%.
I hope I have nudged you into understanding the problem.
Complete newb here. Third question here.
How do I make the text "A Web Developer"
Come under "Hey I'm Hyde"
and how do I control the space between "A Web Developer" and "Hey I'm Hyde"?
I tried to use a line break but there has to be a better way. Line breaks did not work well.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
#big {
font-size: 65px;
display: inline-block;
color: gainsboro;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
<h1 id="big">
Hey I'm Hyde
</h1><br><br><br>
<br>A Web Developer</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
Link to Fiddle:
https://jsfiddle.net/so2w7rkp/
I wish to gain the ability to put the text "A web developer" underneath "Hey I'm hyde" for future flexbox projects.
html,
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
z-index: 999;
width: 100vw;
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em 2em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
margin: 0.45px;
}
#links {
margin-right: 52px;
}
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#welcome-section p:nth-child(1) {
font-size: 30px;
}
#projects {
display: grid;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 45px 45px 45px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="flag.JPG" alt="logo" height="60px" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome-section">
<p>
Hey I'm Hyde
</p>
<p>
A Web Developer
</p>
</section>
<section id="projects">Projects here</section>
</body>
</html>
flex-direction: column;
<section id="welcome-section">
<h1 id="big">
Hey I'm Hyde
</h1>
<small>A Web Developer</small>
</section>
#welcome-section {
padding-top: 60px;
height: calc(100vh - 60px);
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}