This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I'm currently designing the about me section of my portfolio site (mobile version). The section is surrounded by two svg shapes. For some reason, between the content and the upper shape, there is a space that I can't figure out why is there.
Can anyone help me figure out why?
:root {
--color-main:#8049F5;
--color-secondary:#6E00FF;
--color-white:#fff;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
background-color: var(--color-main);
}
body {
line-height: 1.6;
font-family: "Poppins", sans-serif;
}
img {
width: 100%;
height: auto;
}
p {
font-size: 1.3rem;
}
.secondary-header {
text-transform: uppercase;
font-size: 1.9rem;
opacity: 0.8;
letter-spacing: 3px;
}
.introduction__content {
background-color: var(--color-secondary);
padding: 0 2rem;
}
.introduction__header {
color: var(--color-white);
text-align: center;
margin-bottom: 2rem;
}
.introduction__paragraph {
text-align: center;
color: var(--color-white);
opacity: 0.9;
}
.introduction__paragraph:not(:last-child) {
margin-bottom: 2rem;
}
<main>
<section class="introduction">
<img src="https://svgur.com/i/ZTL.svg" class="introduction__up-shape" alt="">
<div class="introduction__content">
<h2 class="introduction__header secondary-header">About me</h2>
<p class="introduction__paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, placeat deserunt. Quae dolorum deserunt assumenda expedita. Excepturi eveniet iusto a.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, corrupti veniam cupiditate blanditiis ipsam enim fuga odio? Ut vel necessitatibus voluptas. Accusantium non velit nam.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quasi beatae rerum id reiciendis eaque, ut doloremque, iusto amet non necessitatibus debitis commodi pariatur voluptates delectus libero deleniti consectetur!
</p>
</div>
<img src="https://svgur.com/i/ZQw.svg" alt="">
</section>
</main>
Simply make your .introduction__up-shape element a block element by applying display: block:
:root {
--color-main:#8049F5;
--color-secondary:#6E00FF;
--color-white:#fff;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
background-color: var(--color-main);
}
body {
line-height: 1.6;
font-family: "Poppins", sans-serif;
}
img {
width: 100%;
height: auto;
}
p {
font-size: 1.3rem;
}
.secondary-header {
text-transform: uppercase;
font-size: 1.9rem;
opacity: 0.8;
letter-spacing: 3px;
}
.introduction__content {
background-color: var(--color-secondary);
padding: 0 2rem;
}
.introduction__header {
color: var(--color-white);
text-align: center;
margin-bottom: 2rem;
}
.introduction__up-shape {
display: block;
}
.introduction__paragraph {
text-align: center;
color: var(--color-white);
opacity: 0.9;
}
.introduction__paragraph:not(:last-child) {
margin-bottom: 2rem;
}
<main>
<section class="introduction">
<img src="https://svgur.com/i/ZTL.svg" class="introduction__up-shape" alt="">
<div class="introduction__content">
<h2 class="introduction__header secondary-header">About me</h2>
<p class="introduction__paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, placeat deserunt. Quae dolorum deserunt assumenda expedita. Excepturi eveniet iusto a.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, corrupti veniam cupiditate blanditiis ipsam enim fuga odio? Ut vel necessitatibus voluptas. Accusantium non velit nam.
</p>
<p class="introduction__paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quasi beatae rerum id reiciendis eaque, ut doloremque, iusto amet non necessitatibus debitis commodi pariatur voluptates delectus libero deleniti consectetur!
</p>
</div>
<img src="https://svgur.com/i/ZQw.svg" alt="">
</section>
</main>
Related
I am having some troubles in CSS. My .content-zona will not show up on the page, it has a lower selector than the nav (for some reason that i can't figure out) and the nav will just overwrite whatever the .content-zona has in CSS. Im very new to this, I hope my question wasn't very confusing. Thank you whoever tried to help a newbie!
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.site-nav li li a:hover
/* Kraj Padajuceg menija */
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>
Nothing is overwritten on your selector, you have a dangling selector before .content-zona and CSS can't recover himself after that error until it reaches a close curly bracket so all .content-zona styles are ruined
Remove these two lines from your CSS code or add curly brackets to end of that selector to fix it
Either Like This
.site-nav li li a:hover{}
Or
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>
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>
I have found an awesome HTML and CSS stacked card article in CSS-tricks. In that demo there is no image, but I want to add an image on the right side of the card in the below code, attached an image for reference. I have tried with all my knowledge but I couldn't make it look like in the image I have attached. Could anyone please help me?
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
<div class="wrapper">
<div class="card1">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
I made two DIV elements .image and .left (You will find them at the bottom of CSS) that position the content and the photo
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1,
.card2,
.card3,
.card4,
.card5,
.card6,
.card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1 {
background-color: #CAC5F5;
}
.card2 {
background-color: #C0FFD6
}
.card3 {
background-color: #FCF4B0
}
.card4 {
background-color: #FFB1B0
}
.card5 {
background-color: #8AC9FF
}
.classname {
background-color: #44c767;
text-indent: 0;
display: inline-block;
color: #ffffff;
font-size: 15px;
font-style: normal;
height: 50px;
line-height: 50px;
width: 140px;
text-decoration: none;
text-align: center;
}
.classname:hover {
background-color: #5cbf2a;
}
.classname:active {
position: relative;
top: 1px;
}
.left {
position: relative;
margin-right: 50%;
}
.image {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 50%;
overflow: hidden;
border-radius: 0 10px 10px 0;
}
<div class="wrapper">
<div class="card1">
<div class="left">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
Know More
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card2">
<div class="left">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card3">
<div class="left">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card4">
<div class="left">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card5">
<div class="left">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
</div>
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="wrapper">
<div class="card1">
<div class="column">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="column">
<img src="http://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg" alt="Girl in a jacket" width="250" height="300">
</div>
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
Please check the Snipped just added code to divide div in 2 columns
Maybe utilize flex and some align-items to attain the centering effect.
.image-box-wrap
{ background-color: Black;
padding: 20px;
}
.image-box
{ background-color: White;
display: flex;
justify-content: space-between;
}
.image-box > *
{ display: flex;
flex-direction: column;
justify-content: center;
}
.image-box .text
{ flex: 1 1 0%;
box-sizing: border-box;
padding: 1em;
align-items: flex-start;
}
.image-box .text a
{ background-color: Orange;
padding: 10px;
color: White;
text-decoration: none;
}
.image-box .image
{ background-color: Teal;
width: 40%;
height: 240px;
}
.image-box .image img
{ display: block;
width: 100%;
}
<div class="image-box-wrap">
<div class="image-box">
<div class="text">
<h2>Card One</h2>
<p>Text goes here... (if you have a bunch of text, you'll attain the sticky positioning where the image follows along with the text that you had in your example as the page scrolls down)</p>
Button
</div>
<div class="image">
IMG tag goes here
</div>
</div>
</div>
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>
when the page is resizing menu and content decreases faster than image and when page has a larger width than the picture is aligned on left side
on normal resizing on pc site is normal image no but when it is on mobile or mobile mode on pc is it broken
i tried
background-size: 100% auto;
background-size: cover;
and nothing works so help me plz i need it thx
/* font-family: 'Montserrat', sans-serif; */
body {
background: #000;
font-family: 'Lato', sans-serif;
}
header {
width: 100%;
background: #fff;
}
nav > * {
list-style: none;
}
nav {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
ul {
padding: 0;
}
nav > ul {
display: flex;
flex-direction: row;
}
.logo {
background: url('../img/01.png') no-repeat;
width: 150px;
height: 50px;
}
.menu {
display: flex;
text-decoration: none;
margin: 0 10px 0 10px;
color: #3a3b3b;
}
.menu:hover {
color: #d96e5d;
transition: all 0.5s ease;
}
strong.menu {
font-weight: normal;
color: #d96e5d;
}
.top-bg {
background: url('../img/topbg.jpg') no-repeat;
background-size: cover;
}
.top-img > h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
color: white;
}
.content {
position: absolute;
top: 800px;
color: white;
font-size: 80px;
}
#media ( max-width:500px ) {
nav > ul {
flex-direction: column;
align-items: center;
}
nav {
flex-direction: column;
align-items: center;
}
.item{
padding: 10px;
width: 90vw;
background: #d3d0d0;
margin: 2px 0 2px 0;
}
.menu {
justify-content: center;
}
}
<header>
<nav>
<a class="logo" href="#"></a>
<ul>
<li class="item">Aktivity</li><li class="item"><strong class="menu">Index</strong></li><li class="item">Kontakt</li><li class="item">Onas</li>
</ul>
</nav>
</header>
<main>
<section class="topimg">
<h1>Coupe Invest</h1>
<img src="assets/img/topbg.jpg" alt="background">
</section>
<section class="content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem a et laboriosam illum recusandae nesciunt veniam architecto saepe ratione! Eaque quas provident voluptates facere consectetur repellendus amet nulla ea nisi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur odio, quos suscipit laudantium quo doloribus nulla sit ut cupiditate mollitia nihil maiores. Vitae ipsum excepturi quibusdam nam molestias ullam! Enim. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque, ut amet laboriosam quaerat, expedita nam neque placeat molestias non hic sit voluptate quam quia beatae nulla rem est eius fugiat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi fugiat, cumque distinctio consequuntur asperiores quia veniam suscipit tenetur, nobis adipisci ad voluptate quisquam ducimus nesciunt id, voluptatem odio neque molestias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid eum adipisci quaerat ducimus pariatur natus velit voluptates! Odit amet tempora quisquam mollitia fugit aliquam neque vitae molestiae debitis aperiam?</p>
</section>
</main>
#media (max-width: 500px)
.item {
width: auto;
}
nav > ul {
flex-direction: unset;
}
}
#media (max-width: 380px)
.menu {
margin: 0 5px 0 6px;
font-size: 13px;
}
}