I've been trying to put this two span classes next to each other without any good result.
Maybe is there any other way that I'm missing?
Thank you in advance.
.numbered {
width: 45px;
height: 45px;
background-color: #c61274;
border-radius: 50%;
font-size: 17px;
padding-top: 13px;
margin-top: 40px;
}
.titled {
color: #444949;
font-size: 18px;
font-weight: bolder;
display: inline-block;
/* to make it inline */
vertical-align: middle;
}
<div class="row">
<div class="col-md-4">
<span class="badge numbered">1</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
</div>
<div class="col-md-4">
<span class="badge numbered">2</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
</div>
<div class="col-md-4">
<span class="badge numbered">3</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
</div>
</div>
My result
The .titled span was already inline..there is no need to set it to inline-block and the top margin on the .numbered span is also unnecessary.
.numbered {
width: 45px;
height: 45px;
background-color: #c61274;
border-radius: 50%;
font-size: 17px;
padding-top: 13px;
margin: 4px;
}
.titled {
color: #444949;
font-size: 18px;
font-weight: bolder;
vertical-align: middle;
}
Codepen Demo
.badge.numbered {
width: 45px;
height: 45px;
background-color: #c61274;
border-radius: 50%;
font-size: 17px;
padding-top: 13px;
margin: 4px;
}
.titled {
color: #444949;
font-size: 18px;
font-weight: bolder;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<span class="badge numbered">1</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
</div>
<div class="col-md-4">
<span class="badge numbered">2</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
</div>
<div class="col-md-4">
<span class="badge numbered">3</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
</div>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 7 months ago.
I don't Know , if there is a solution, using css-grid?,
i have tried giving a max width to note-card but i dont want to remove height:max-content; this is because what if note has more than 30 words. thanks
.flex-container{
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
here is my code
body{
background-color:black;
}
.flex-container div {
display: inline-block;
min-height: 1em;
height: max-content;
width: 12em;
padding: 5px;
border: 1px solid white;
border-radius: .5em;
margin: 4px;
color:white;
}
.flex-container{
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus
nihil cupiditate!</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident
modi ex ipsa aspernatur maiores?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore
vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam
dicta.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi
autem?</div>
</div>
So CSS has a columns property that let's you achieve this very simply, see solution below. Compatible with everything, even Internet Explorer. More info on MDN
:root { --gap: .5rem }
.columnLayout {
columns: 2;
column-gap: var(--gap);
padding: var(--gap) var(--gap) 0 var(--gap);
}
.columnLayout div {
display: inline-block;
margin-bottom: var(--gap);
}
/* BELOW STYLES FOR STYLING ONLY -- NOT RELEVANT TO ANSWER */
* { box-sizing: border-box } body{ background-color: black; color: white; font: 16px sans-serif; margin: 0 } .columnLayout div { border: 1px solid currentColor; border-radius: .5rem; padding: .5rem }
<div class="columnLayout">
<div>1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
<div>2. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus nihil cupiditate!</div>
<div>3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
<div>4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
<div>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident modi ex ipsa aspernatur maiores?</div>
<div>6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam dicta.
</div>
<div>7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi autem?
</div>
</div>
Alternatively, if you want to keep the left-right flow then you will need JavaScript for a "masonry" layout, if you can't / don't want to write the JS yourself there is a widely used library for this called Masonry JS
two h4, img and p tags are grouped in separate < div>s and I've used float for img, used to separate from each other but still they overlap.
https://i.stack.imgur.com/SUxli.png
this is the image with the output.
I'm new to this, can anybody please help. Thank you.
img {
width: 50%;
height: auto;
margin: 20px 10px 20px 0px;
/* float: left; */
}
.service {
margin: 20px auto 20px auto;
text-align: left;
line-height: 2;
}
<div class="service">
<h4>Lorem ipsum dolor sit amet</h4>
<img src="image.jfif" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
<br>
<div class="service">
<h4>Lorem ipsum dolor sit amet</h4>
<img src="image.jfif" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
I would try nesting your code in a container that is flexed with a column flex-direction. Then I would put your <h4>'s before the service div and flex that div also, but use a flex-direction: row; See the CSS changes I made.
.container {
display: flex;
flex-direction: column;
}
p {
padding: 10px;
width: 500px;
margin: auto;
}
img {
width: 50%;
height: auto;
/* float: left; */
}
.service {
text-align: left;
line-height: 2;
display: flex;
flex-direction: row;
}
<div class="container">
<h4>Lorem ipsum dolor sit amet</h4>
<div class="service">
<img src="https://dummyimage.com/600x300/000/fff" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
<br>
<h4>Lorem ipsum dolor sit amet</h4>
<div class="service">
<img src="https://dummyimage.com/600x300/000/fff" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
</div>
</div>
Info in advance:
I've been looking for a solution for almost a week now and have already searched half of StackOverflow.
I know that there are many questions with the same title, but these have not brought me any further.
So please before commenting that this is a duplicate, first try the respective solution on my code.
The goal:
I want to add my footer at the very end of the page after the content.
The problem:
The ideas I have tried so far do not work properly. Either the content is permanently displayed at the edge of the screen, no matter where you are (so to speak a sticky footer), or the footer is in the middle of the content.
The Code (HTML & SCSS):
<html>
<head>
<link id="theme" rel="stylesheet" href="style.css" type="text/css" />
<title>Some page with footer</title>
</head>
<body>
<!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
<div class="navigation">
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
</label>
<nav>
<div class="logo">
</div>
<ul>
<li>Some navigation</li>
<li>Some content</li>
</ul>
</nav>
<div class="icons">
</div>
</div>
<!-- Content -->
<main>
<div class="content">
<h2 id="faq">FAQ</h2>
<p>Some content here:
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<br>
</div>
</main>
<!-- Footer -->
<footer>
<ul>
<li># Copyright 2021 by some guy</li>
<li>This is not the final website.</li>
<li>Contact</li>
<li>AGB/TERMS</li>
<li>LEGAL</li>
</ul>
</footer>
</body>
</html>
body {
main {
position: absolute;
top: 15vh;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-align: center;
width: 90%;
h2 {
position: relative;
font-family: 'Times New Roman', Times, serif ;
font-size: 2.7vh;
text-align: center;
}
p {
position: relative;
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
font-size: 1.5vh;
text-align: center;
}
}
footer {
position: absolute; // Footer is inside the content
left: 0;
top: 100vh;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
background-color: red;
ul li {
display: inline;
}
}
}
I think this might help you
body {
margin: 0;
padding: 0;
}
.content {
top: 15vh;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-align: center;
width: 90%;
}
h2 {
position: relative;
font-family: 'Times New Roman', Times, serif;
font-size: 2.7vh;
text-align: center;
}
p {
position: relative;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.5vh;
text-align: center;
}
footer {
left: 0;
margin: 0;
padding: 0;
height: 60px;
text-align: center;
background-color: red;
padding: 0;
}
ul, li {
display: inline;
}
<html lang="en">
<head>
<link id="theme" rel="stylesheet" href="style.css" type="text/css" />
<title>Some page with footer</title>
</head>
<body>
<!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
<div class="navigation">
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
</label>
<nav>
<div class="logo">
</div>
<ul>
<li>Some navigation</li>
<li>Some content</li>
</ul>
</nav>
<div class="icons">
</div>
</div>
<!-- Content -->
<main>
<div class="content">
<h2 id="faq">FAQ</h2>
<p>Some content here:
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<br>
</div>
</main>
<!-- Footer -->
<footer>
<ul>
<li># Copyright 2021 by some guy</li>
<li>This is not the final website.</li>
<li>Contact</li>
<li>AGB/TERMS</li>
<li>LEGAL</li>
</ul>
</footer>
</body>
</html>
WordPress theme developers are always faced with this problem. One way to go about is to give your "main" element a style of
height:100vh;
This way it pushes the footer to the bottom of the page without you going through the stress of
position:absolute;
I want to create a section with tabs that becomes an "accordion" in small screens, so instead of defining the tabs bar first and then the content of each tab I'm placing the link to the tab and the content of that tab right after the link and then using CSS Grid I'm positioning the active tab after all the links in the tab bar to have the links in the first row and the active tab in the second row.
You can see that working here:
https://codepen.io/rbournissent/pen/PByXxM
div {
display: grid;
grid-template-columns: repeat(4, auto);
grid-row-gap: 80px;
grid-template-rows: 40px 1fr;
justify-content: space-between;
}
a {
border: 1px solid black;
}
article {
display: none;
grid-column: 1 / 5;
grid-row: 2 / 3;
border: 1px solid black;
}
article.active {
display: block;
}
<div>
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
</article>
Link 3
<article>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
</article>
Link 4
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
</article>
</div>
The problem is what happens when the content of the article grows. The links get stretched to fill the whole row and space-between is no longer working (i.e. there is no more space between them):
https://codepen.io/rbournissent/pen/qyJLwy
<div>
Link 1
<article class="active">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ab beatae sed maxime. Amet quam, error atque alias velit dicta officia et optio. Quidem tempora officiis minus laudantium! Beatae, eveniet!
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
</article>
Link 3
<article>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
</article>
Link 4
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
</article>
</div>
The only difference is the amount of text (content) in the active article (tab).
Can somebody help me with this?
If you're allowed to use grid-template-areas, you can try this out:
.accordion {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 30% 70%;
grid-template-areas:
"l1 l2 l3 l4"
"a a a a";
}
a {
margin: 20px;
border: 1px solid red;
text-align: center;
}
a:nth-of-type(1) {
grid-area: l1;
}
a:nth-of-type(2) {
grid-area: l2;
}
a:nth-of-type(3) {
grid-area: l3;
}
a:nth-of-type(4) {
grid-area: l4;
}
article {
display: none;
}
article.active {
text-align: justify;
padding: 0 20px 0 20px;
display: block;
grid-area: a;
}
<div class="accordion">
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 3
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 4
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
</div>
I think this will work for you:
The fix was simple just added width:15vw; to the <a> so the width
dont get changed.
div {
display: grid;
grid-template-columns: repeat(4, auto);
grid-row-gap: 80px;
grid-template-rows: 40px 1fr;
justify-content: space-between;
}
a {
border: 1px solid black;
width:15vw;
margin-right: 11.2vw;
}
a:nth-last-child(2){ margin-right:0;}
article {
display: none;
grid-column: 1 / 5;
grid-row: 2 / 3;
border: 1px solid black;
}
article.active {
display: block;
}
<div>
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
</article>
Link 3
<article>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
</article>
Link 4
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
</article>
</div>
This issue occurred as you are using display: grid; the width of the content in article is effecting the a even the if the text in the article it affects the a so, in my opinion, it's better to go with my solution.
Hope this was helpfull for you.
This is the html file:
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
I want to set the all text centered of individual div height. Means first the text of h1 will appear and just below of it the text of paragraph tag will appear. the space from upper portion to h1 tag and the space from ending of p tag to lower portion have to same.
I am newbie.please help me.
This should work for you. Hope it helps!
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
position: relative;
top: -60px;
left: 250px;
}
p {
padding: inherit;
margin: inherit;
position: relative;
top: 60px;
right: 480px;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>