This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 10 months ago.
I'm running into some issues with my code. I have a nav bar in my header that I am trying to add some space between. I would like my links on one side of the header and my company name on the other. However, when I do space-between it puts my links to the center of the page. I previously had a materials icon in my header as well but I sat the display to none (until it meets the condition of my media query) which I thought would solve the issue but it has not. Any advice on solving this issue?
/* Site-wide */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
/* height: 100%; */
}
/* Header */
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightgray;
align-items: center;
padding: 0px 0px 5px 5px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.logo {
font-size: 2vh;
}
header a {
text-decoration: none;
color: white;
padding-right: 10px;
}
.material-icons {
display: none;
}
/* Main */
main {
display: flex;
padding-left: 5px;
margin-top: 50px;
flex-wrap: wrap;
/* justify-content: space-around; */
}
.card {
border: 1px solid black;
height: 350px;
width: 300px;
/* margin: 5rem; */
margin: 0 20px 2rem 5px;
background-color: rgba(211, 211, 211, 0.251);
}
.card h3 {
background-color: rgba(185, 44, 185, 0.803);
padding-left: 3px;
}
.card p {
padding-left: 5px;
}
/* Footer */
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: lightgray;
text-align: center;
}
/* Media Queries */
#media(max-width:768px) {
.hamburger {
display: none;
}
.material-icons {
display: block;
}
main {
display: flex;
flex-wrap: wrap;
}
.card {
flex-basis: auto;
}
.card h3,
p {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="media.css">
</head>
<body>
<header>
<span class="logo">Company Name</span>
<nav>
Link One
Link Two
Link Three
</nav>
<a class="hamburger"><i class="material-icons">menu</i></a>
</header>
<main>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
</main>
<footer>
Copyright 2009
</footer>
</body>
</html>
Specify margin-left: auto; on nav.
/* Site-wide */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
/* height: 100%; */
}
/* Header */
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightgray;
align-items: center;
padding: 0px 0px 5px 5px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.logo {
font-size: 2vh;
}
header a {
text-decoration: none;
color: white;
padding-right: 10px;
}
.material-icons {
display: none;
}
/* Main */
main {
display: flex;
padding-left: 5px;
margin-top: 50px;
flex-wrap: wrap;
/* justify-content: space-around; */
}
.card {
border: 1px solid black;
height: 350px;
width: 300px;
/* margin: 5rem; */
margin: 0 20px 2rem 5px;
background-color: rgba(211, 211, 211, 0.251);
}
.card h3 {
background-color: rgba(185, 44, 185, 0.803);
padding-left: 3px;
}
.card p {
padding-left: 5px;
}
/* Footer */
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: lightgray;
text-align: center;
}
/* Media Queries */
#media(max-width:768px) {
.hamburger {
display: none;
}
.material-icons {
display: block;
}
main {
display: flex;
flex-wrap: wrap;
}
.card {
flex-basis: auto;
}
.card h3,
p {
font-size: 20px;
}
}
nav {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="media.css">
</head>
<body>
<header>
<span class="logo">Company Name</span>
<nav>
Link One
Link Two
Link Three
</nav>
<a class="hamburger"><i class="material-icons">menu</i></a>
</header>
<main>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, dolor eveniet consequatur aliquid id quo quam architecto accusantium ipsam et officia temporibus nesciunt hic officiis totam fugiat doloremque iusto amet.</p>
</div>
</main>
<footer>
Copyright 2009
</footer>
</body>
</html>
Related
I have two div's float left and right. In the left div there is an image, and in the right div there are paragraphs. The image in the left div is hidden, when I hover the right div the image should be displayed but I can't do this, there is a problem when I attempt to do this.
.lower-container {
padding: 10px;
width: 100%;
text-align: center;
margin-bottom: -70px;
}
.left-logo-container {
width: 40%;
float: left;
padding: 10px;
padding-top: 0 !important;
}
.left-logo-container img {
width: 250px;
padding-bottom: 50px;
}
.right-para-container {
width: 60%;
float: right;
padding: 10px;
margin-top: -200px;
}
.right-para-container p {
color: white;
text-align: left;
padding-left: 0;
padding-right: 120px;
font-family: oh-whale;
}
.clear:after {
clear: both;
content: "";
display: table;
}
/* Display element on hovering */
.hide {
display: none;
}
.myDIV:hover+.hide {
display: block;
}
<section id="welcome_cryptonic_06">
<div class="container">
<div class="vision-container">
<div class="title-container">
</div>
<div class="lower-container">
<div class="left-logo-container myDIV">
<img src="about_image.png">
</div>
<div class="right-para-container hide">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</section>
<!-- End welcome_cryptonic -->
Here is the solution !
Run the code in a full screen.
.lower-container {
display: flex;
flex-wrap:wrap;
padding:5rem;
height:20%;
}
.left-logo-container {
order:1;
height:20rem !important;
padding:2rem;
}
.left-logo-container img{
height:20rem;
width:auto;
}
.right-para-container {
order:2;
height:25%
color: black;
width:50%;
text-align: left;
font-family: oh-whale;
padding:5rem;
}
.right-para-container p{
border:2px solid grey;
border-radius:2rem;
padding:2rem;
}
#show {
display: none
}
#main:hover + #show {
display: block
}
<section id="welcome_cryptonic_06">
<div class="container">
<div class="vision-container">
<div class="title-container">
</div>
<div class="lower-container">
<div class="right-para-container " id='main'>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
</p>
</div>
<div class="left-logo-container " id='show'>
<img src="https://images.unsplash.com/photo-1655833266283-af4002bf9ebb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
</div>
</div>
</div>
</div>
</section>
I am trying to postition a footer to the bottom of my screen no matter the size of the screen, i've tried wrapping it in anoter conatiner. Justifying the content and aligning the items. I have tried using vh measurements and have tried messing with the height of the container div. Nothing seems to be nudging it lol. In codepen it seems to go to the bottom, but that's probably because codepen isn't a full sized screen.
<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>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="down">
<div class="footer">
The Odin Project ❤️
</div>
</div>
</body>
</html>```
CSS: body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.Cards {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
flex: 1 1 0;
}
.contents {
display: flex;
flex-direction: row;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.down {
display: flex;
flex-direction: column;
justify-items: end;
height: 60%;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
text-decoration: none;
font-size: 20px;
margin: 0;
}
.card {
height: 200px;
width:200px;
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
}
You can do that by setting positions. Give your body element a position: relative; and .footer
position: absolute; /* so you can position the footer relative to the body */
width: 100%; /* to make the footer span the entire view port */
bottom: 0; /* and finally to the bottom */
Code:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
flex-shrink: 0;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
margin: 16px;
padding: 16px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.body {
display: flex;
flex: 1;
}
<!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>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Here I added the display: flex; and flex-wrap: wrap; for the class container, with class card as flex items. However the cards are not wrapping. I checked the parent body and it has display: flex; set so I don't know where I went wrong.
This is the output I am getting
This is the desired outcome
You can apply a fixed-width to your cards. Without defining a width, flex-box is going to try to determine the width for them, based on the screen size. If you set a fixed-width the cards will keep that width upon resizing the browser, which then your flex-wrap: wrap; on your container will kick in and wrap them when there is not enough space. I added width: 350px; to your card See the changes below.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
flex-shrink: 0;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
margin: 16px;
padding: 16px;
width: 350px;
min-width: 150px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
}
.body {
display: flex;
flex: 1;
}
<!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>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Be ensure your flex item have maximum width . than the main container will be wrapping.
.card {
max-width: 200px;
}
I have a left navbar that has a height of 100% but when there's any overflow the 100% height doesn't work.
I tried giving body and html height of 100% and min-height of 100%. I also tried giving the menu min-height: 100% and 100vh height. I read a lot of StackOverflow questions but none of the solutions worked for me.
Here's the code: Or codepen: shorturl.at/dgvFL
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial
}
.nav-bar {
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>
Use position: fixed if you want to fix navbar position.
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial;
}
.nav-bar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
margin-left: 30%;
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>
I am trying to center images inside my <article> and <aside>, and i am not sure what's wrong with the code. I tried to make some adjustments using article#tablet but no success. Now the images lays on the left, no matter what...if i inspect the item and give it a margin or padding it will react. But can not center it.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://via.placeholder.com/150x150" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://via.placeholder.com/150x150" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Any help i would appreciate. Thank you
You can make use of flexbox in this situation. According to your need, just use the align-items and justify-content properly.
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
display: flex;
align-items: center;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
.img-wrapper img {
width: 50px;
height: 50px;
}
.img-wrapper {
display: inline-flex;
align-items: center; /**Vertical */
justify-content: center; /**Horizontal */
height: 100%;
flex: 1;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet" class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article class='img-wrapper'>
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
Your CSS does not have any styles for images.
To center the image in your you have to select it and apply styles to it, for example an auto margin and display: block:
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
/* Added this */
article img,
aside img {
display: block;
margin: 0 auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
<section class="inner-wrapper">
<article id="tablet">
<img src="./img/hand_ipad.png" alt="">
</article>
<aside id="tablet2">
<h2>MOBILE. TABLET. DESKTOP.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
</aside>
</section>
<section class="inner-wrapper-2">
<article id="mobile">
<h2>ACROSS EACH DEVICE</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit deserunt error animi nobis reiciendis quaerat sint itaque dicta, aut vel molestias? Ipsam non expedita incidunt ea cupiditate voluptas fuga magnam.</p>
</article>
<aside>
<img src="https://picsum.photos/200/300" alt="">
</aside>
</section>
<section class="inner-wrapper">
<article>
<img src="https://picsum.photos/300/300" alt="">
</article>
<aside id="desktop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo a quasi vero consequuntur aut atque, incidunt dolor eos quas numquam debitis architecto dolore delectus aspernatur, et amet sequi vel maxime.</p>
</aside>
</section>
You want to center the image inside the <aside> and <article> right ?
Just add property : text-align : center in the aside and article, the images inside them will be centered.
Checkout in codepen for more detail
https://codepen.io/anon/pen/PddMYZ
Or only necessary code here (The css file) :
.inner-wrapper {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
text-align : center;
}
#tablet {
background-color: #C3D7DF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
#tablet2 {
background-color: #A2B2C1;
}
#mobile {
background-color: #BEB9AD;
}
#desktop {
background-color: #F1AA90;
}
.inner-wrapper-2 {
float: left;
width: 100%;
background-color: #C3D7DF;
}
aside{
text-align : center;
}
This is another simple method.
I have wrapped image in a div and added single css line for that div.
section {
float: left;
width: 100%;
background-color: #C3D7DF;
}
article {
float: left;
width: 50%;
background-color: #A2B2C1;
}
aside {
float: right;
width: 50%;
background-color: #C3D7DF;
}
/*css which I have added*/
.img-wrapper {
text-align: center;
}
<section>
<article>
<h2>Article Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</article>
<aside>
<h2>Aside Block.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum a, commodi dolor fugit deleniti ipsam eveniet exercitationem, repudiandae, tempore aspernatur eum id delectus placeat ullam possimus quis sequi cupiditate amet?</p>
<div class="img-wrapper">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
</aside>
</section>