This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 5 years ago.
I want a desktop-like full-page width layout.
Some menu at the top (uknown height, depending on the content),
and div underneath that takes ALL the available space in viewport.
div {
padding: 0px
}
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
}
.outer {
background: olive;
height: 100%;
}
.menu {
background: orange;
}
.should_fill_available_space {
background: brown;
}
<div class="outer">
<div class="menu">
Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
<div id="this" class="should_fill_available_space">
Brown color should go all the way down
</div>
</div>
I've got a codepen for this case:
https://codepen.io/marek-zganiacz/pen/NvEaxr
I want should_fill_available_space go all way down, as in the case where menu would have height:10% and should_fill_available_space have 'height:90%`.
The easiest way to achieve this is using flexbox.
You assign display: flex to the parent container. in your case this is outer .outer.
a flexbox works in a single direction. So you can look at them like a column (vertical) or row(horizontal). The default setting is that it spreads the children elements out over a row. But we want to create a column. Therefore we have to change the flex-direction on .outer to flex-direction: column.
Now we need to specify how we want the flexbox to divide the amount of space available in the .outer. Normal behaviour is that the flexbox gives its children their normal width/height. But by assigning flex:1 to .should_fill_available_space, this element will get all the extra available space. What the flexbox basically says is that we want the computer to use all 1/1 = 100% (used flex value divided by the total flex value of all children) available room to apply to .should_fill_available_space, while keeping minimal space for the .menu width. Technically flex: is a shorthand for some other properties, but that doesn't really matter for this question.
Here is your JS-Fiddle: https://jsfiddle.net/cryh53L7/
html
<div class="outer">
<div class="menu">
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
</div>
<div id="this" class="should_fill_available_space">
Brown color should go all the way down
</div>
</div>
css
div{
padding: 0px
}
html, body{
height: 100%;
padding: 0px;
margin: 0px;
}
.outer {
display: flex;
flex-direction: column;
background: olive;
height: 100%;
}
.menu{
background: orange;
}
.should_fill_available_space{
flex: 1;
background: brown;
}
Try this!
I used a table display, I hope it is okay for you :)
HTML:
<div class="outer">
<div class="menu">
Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
</div>
<div id="this" class="should_fill_available_space">
Brown color should go all the way down
</div>
CSS:
div{
padding: 0px
}
html, body{
height: 100%;
padding: 0px;
margin: 0px;
}
.outer {
background: olive;
height: 100%;
display:table;
width:100%;
}
.menu{
background: orange;
display:table-row;
}
.should_fill_available_space{
background: brown;
display:table-row;
}
div+ div{
height:100%;
}
You can achieve this with flexbox in CSS3 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Update your CSS like this to see it working:
.outer {
background: olive;
height: 100%;
display: flex;
flex-direction: column;
}
.should_fill_available_space{
background: brown;
flex-grow: 2;
}
This is where the world of web document standards meets viewport based desktop application emulation. You need containers to be positioned absolute. Within these containers you will be able to setup relative position elements or use elements that will use the html flow.
There are numerous APIs out there which will do just that under the covers and they will invariably rely on javascript calculations to place elements according to their dimensions after being attached to the DOM.
Here is a simple example based on your code:
div{
padding: 0px
}
html, body{
height: 100%;
padding: 0px;
margin: 0px;
}
.outer {
background: olive;
height: 100%;
width:100%
position:absolute;
}
.menu{
background: orange;
}
.should_fill_available_space{
background: brown;
position:absolute;
bottom:0px;
width:100vw;
}
<div class="outer">
<div id="menu" class="menu">
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
</div>
<div id="this" class="should_fill_available_space">
Brown color should go all the way down
</div>
</div>
As I mentioned, you can use javascript to retrieve the dimension of the menu and than apply that to your layout.
window.addEventListener("load", function load(event){
var menu = document.getElementById("menu");
var main = document.getElementById("this");
var menuHeight = menu.offsetHeight;
main.style.top = menuHeight + "px";
},false);
And here is the codepen.
Related
the photo should be positioned to the right and become smaller than the parent element, this is a react component and the photo should be placed responsively.
.image {
position: absolute;
border-radius: 1rem;
left:0px;
height: auto;
width: 100%;
}
the html of the photo container:
<div className={styles.container}>
<div className={styles.title}>{title}</div>
<div className={styles.about}>{about}</div>
<img src={image} alt={title} className={styles.image} />
</div>
.container {
width: auto;
#include flex(column, center, flex-start);
padding: 3rem 10rem;
background: #2697fe;
border-radius: 1rem;
margin: 1rem;
position: relative;}
.image {
border-radius: 1rem;
height: auto;
right: 20vw;
max-width: 80%;
}
it gives this result and I need help with the position of the photo again:
the photo in the small size screen(the border is no longer rounded):
I think your HTML document structure is like this:
<div className="section1">
<div className="text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<img className="image" src="https://picsum.photos/200" alt="img" />
</div>
Using the Position property may not give you an appropriate layout every time in such designs.
You can make use of the CSS Flex Box to arrange the items inside the "section1" like this:
.section1 {
background: lightblue;
border-radius: 2rem;
margin: 2rem;
padding: 2rem;
display: flex;
justify-content: space-around;
}
.image {
border-radius: 1rem;
right: 20vw;
height: auto;
max-width: 80%;
object-fit: contain;
}
/* rsponsive design --- small screen size */
#media screen and (max-width: 640px) {
.section1 {
flex-direction: column;
}
.image {
border-radius: 1rem;
right: 0;
height: auto;
max-width: 100%;
object-fit: contain;
margin-top: 1rem;
}
}
This will give you a layout like this:
small screen size
large screen size
hope this answers your question :)
make sure to give the parent div that holds the image a width and height.
Then make sure that the image has a max-width: 100% and a max-height: 100% Don't work with width and height with images as that can lead to horrible responsive issue's.
Hope this helped, if theres something I can do better to bring more clarity let me know.
You need to add more flexbox structure around your HTML/JSX elements to get the image to sit to the right of the text. If you want to have the image sit inline with the text, the flex-box direction should be row (which is the default).
i.e.,
// jsx
<div className={styles.container}>
<div className={styles.innerContainer}>
<div> <-- Extra surrounding divs keeps flex children elements grouped correctly.
<div className={styles.title}>{title}</div>
<div className={styles.about}>{about}</div>
</div>
<div>
<img src={image} alt={title} className={styles.image} />
</div>
</div>
</div>
// styles
.container {
width: auto;
#include flex(column, center, flex-start);
padding: 3rem 10rem;
background: #2697fe;
border-radius: 1rem;
margin: 1rem;
position: relative;
}
.inner-container {
display: flex; <-- puts image inline. (direction "row" by default)
}
.image {
width: 100%;
}
Depending on how much you want the image to sit to the right, you may need to modify the container and inner-container styles.
Using Javascript, I have multiple element and when I hover that element, it changes the content and element.
I tried using mouseover and mouseout, it's working for single element, but doesn't work when I have multiple element.
I add loops for the parent, but still not working, also now when I hover the first element, it's just looping over.
What am I doing wrong?
const wrapper = document.querySelectorAll(".wrapper");
wrapper.forEach(function () {
let mouseWhite = document.querySelector(".commercial-white");
let mouseBlue = document.querySelector(".commercial-blue");
mouseWhite.addEventListener("mouseover", function (e) {
mouseBlue.classList.add("open");
e.stopPropagation();
})
mouseBlue.addEventListener("mouseout", function (e) {
mouseBlue.classList.remove("open");
e.stopPropagation();
})
})
.wrapper {
display: flex;
position: relative;
}
.commercial-white {
background-color: #f1f1f4;
width: 240px;
height: 260px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 15px solid #005da0;
margin: 10px;
}
.commercial-blue {
position: absolute;
background-color: #005da0;
color: #FFFFFF;
width: 240px;
height: 273px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 2px solid #FFFFFF;
visibility: hidden;
}
.open.commercial-blue {
visibility: visible;
}
.commercial-flip {
padding: 20px;
}
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
You need to 'querySelect' on each wrapper, not the document because in your code document.querySelector(".commercial-white") will only give you the first occurence of .commercial-white .. and it will do that twice, but it will still be the same occurence... the first one in the document (twice).
Your querySelectorAll gave you a NodeList of elements wrapper.
forEach will go through each element of your NodeList (kind of) like an array. wrapper[0] wrapper[1]...
The argument aWrapper is just the name for "The current element being processed in the NodeList".
This way, aWrapper.querySelector will only "select" within the current element wrapper in the loop.
wrapper.forEach(function (aWrapper) {
let mouseWhite = aWrapper.querySelector(".commercial-white");
let mouseBlue = aWrapper.querySelector(".commercial-blue");
const wrapper = document.querySelectorAll(".wrapper");
wrapper.forEach(function(aWrapper) {
let mouseWhite = aWrapper.querySelector(".commercial-white");
let mouseBlue = aWrapper.querySelector(".commercial-blue");
mouseWhite.addEventListener("mouseenter", function(e) {
console.log("e.target.classList mouseWhite :", e.target.classList);
mouseBlue.classList.toggle("open");
})
mouseBlue.addEventListener("mouseout", function(e) {
console.log("e.target.classList mouseBlue :", e.target.classList);
mouseBlue.classList.toggle("open");
})
})
.wrapper {
display: flex;
position: relative;
}
.commercial-white {
background-color: #f1f1f4;
width: 240px;
height: 260px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 15px solid #005da0;
margin: 10px;
}
.commercial-blue {
position: absolute;
background-color: #005da0;
color: #FFFFFF;
width: 240px;
height: 273px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 2px solid #FFFFFF;
visibility: hidden;
}
.open.commercial-blue {
visibility: visible;
}
.commercial-flip {
padding: 20px;
pointer-events: none;
}
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
Edit :
For the buggy display I just added "pointer-events: none;" to .commercial-flip and it was enough :
.commercial-flip {
padding: 20px;
pointer-events: none; }
I am fairly new to JS (so I may be wrong), but if I understand correctly, it work because if .commercial-flip can receive pointer events then when it's hovered, it's parent is not.
Before this modification, as long as you didn't enter the border of .commercial-flip it worked just fine.
So apparently hovering a child isn't the same as hovering it's parent if the child can catch the event, but if it can't it's all good.
Edit : Preventing Child from firing parent's click event
Note : I used classList.toggle instead of classList.add and classList.remove, and mousenter instead of mouseover but it's just a personal preference here ; it gives the exact same result.
You have to query the childs:
wrapper.forEach(function (el) {
let mouseWhite = el.querySelector(".commercial-white");
let mouseBlue = el.querySelector(".commercial-blue");
....
You're looping over each one but using the same selector which causes some issues. Just change your loop to the following so there's a reference to each element:
wrapper.forEach(function (el) {
let mouseWhite = el.querySelector(".commercial-white");
let mouseBlue = el.querySelector(".commercial-blue");
mouseWhite.addEventListener("mouseover", function (e) {
mouseBlue.classList.add("open");
e.stopPropagation();
})
mouseBlue.addEventListener("mouseout", function (e) {
mouseBlue.classList.remove("open");
e.stopPropagation();
})
})
I am working on a way to display posts in a way that if the text of the post has more than three lines, only the first three lines are displayed and the rest is toggled via a Show More/Show Less div. I am using liquid for the loop over the posts, a css class for truncating and jquery for toggeling the truncate class
My problem now is that I would like to give the Show More/Show Less div the display:none property if we have less than three lines, but I don't know how.
Here is the code excerpt:
html:
<div class="posts">
{% for post in site.posts %}
<div class="post-teaser">
{% if post.thumbnail %}
<div class="post-img">
<img src="{{ site.baseurl }}/{{ post.thumbnail }}">
</div>
{% endif %}
<span>
<header>
<h1>
{{ post.title }}
</h1>
<p class="meta">
{{ post.date | date: "%B %-d, %Y" }}
</p>
</header>
<div id="{{post.path}}" class="excerpt truncate">
{{ post.content | strip_html | escape }}
</div>
<div class="txtcol"><a>Show More</a></div>
</span>
</div>
{% endfor %}
CSS:
/* styles for '...' */
.truncate {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.truncate:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines
*/
.truncate:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
from here: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
And jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".txtcol").click(function(){
if($(this).prev().hasClass("truncate")) {
$(this).children('a').text("Show Less");
} else {
$(this).children('a').text("Show More");
}
$(this).prev().toggleClass("truncate");
});
});
</script>
I would prefer a CSS solution, if possible.
EDIT: here is a snippet:
https://jsfiddle.net/6349q51r/4/
In the second post, the show more/show less should not appear (on most devices).
EDIT 2:
Here is my try to implement it, but somehow the line
$(this).next().css("display", "none;");
does not work.
https://jsfiddle.net/6349q51r/29/+
EDIT 3:
It was a typo; it now works:
https://jsfiddle.net/6349q51r/36/
You can check for the height of the data with scrollHeight of the data. if scrollHeight is greater than height then show the Show More/Less div.
I have created one snippet for you.. see the js and css.
$(document).ready(function(){
$(".content").each(function(){
if($(this).height() < $(this)[0].scrollHeight){
$(this).parent().find(".txtcol").show();
$(this).toggleClass("truncate");
}
});
$(".txtcol").click(function(){
if($(this).prev().hasClass("truncate")) {
$(this).parent().find(".content").css("max-height", $(this).parent().find(".content")[0].scrollHeight);
$(this).children('a').text("Show Less");
} else {
$(this).parent().find(".content").css("max-height", "3.6em");
$(this).children('a').text("Show More");
}
$(this).prev().toggleClass("truncate");
});
});
.content {
width:100px;
overflow: hidden;
white-space:normal;
text-overflow: ellipsis;
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
}
.txtcol{
display:none;
color:blue;
cursor:pointer;
}
.maincontent{
display:inline-block;
vertical-align:top;
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="txtcol"><a>Show More</a></div>
</div>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been
</div>
<div class="txtcol"><a>Show More</a></div>
</div>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply
</div>
<div class="txtcol"><a>Show More</a></div>
</div>
You can test it on jsfiddle with small amount of text..
https://jsfiddle.net/nimittshah/rdjyucpz/
Thanks,
$(document).ready(function(){
$(".content").each(function(){
if($(this).height() < $(this)[0].scrollHeight){
$(this).parent().find(".txtcol").show();
$(this).toggleClass("truncate");
}
});
$(".txtcol").click(function(){
if($(this).prev().hasClass("truncate")) {
$(this).parent().find(".content").css("max-height", $(this).parent().find(".content")[0].scrollHeight);
$(this).children('a').text("Show Less");
} else {
$(this).parent().find(".content").css("max-height", "3.6em");
$(this).children('a').text("Show More");
}
$(this).prev().toggleClass("truncate");
});
});
.content {
width:100px;
overflow: hidden;
white-space:normal;
text-overflow: ellipsis;
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
}
.txtcol{
display:none;
color:blue;
cursor:pointer;
}
.maincontent{
display:inline-block;
vertical-align:top;
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="txtcol"><a>Show More</a></div>
</div>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been
</div>
<div class="txtcol"><a>Show More</a></div>
</div>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply
</div>
<div class="txtcol"><a>Show More</a></div>
</div>
Website in Question
What I want to happen is that when someone hovers one of the 3 buttons "Signature Events" "Weddings" "Le Coq d'Or" the background and content of the div above it change. The div above it is static, it's not a slider. Just a styled HTML block.
I've just started getting into JS within the last week or so, and this seems like it could be done with JS switch, but I'm not sure. I don't even know what to search to get info on this.
Thank you!
You can use a data attribute with the target class and a little bit jQuery Code.
$('button').hover(
function() {
$('header').addClass($(this).attr("data-class")).text($(this).attr("data-title"));
}, function() {
$('header').removeClass($(this).attr("data-class")).text($('header').attr("data-title"));
}
);
header{
background-image: url('http://lorempixel.com/200/600/');
background-size: cover;
height: 180px;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
}
header.backgroundOne{
background-image: url('http://lorempixel.com/200/600/');
}
header.backgroundTwo{
background-image: url('http://lorempixel.com/200/600/');
}
header.backgroundThree{
background-image: url('http://lorempixel.com/200/600/');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header data-title="Header Image">
Header Image
</header>
<button data-class="backgroundOne" data-title="Title One">
Change Header 1
</button>
<button data-class="backgroundTwo" data-title="Title Two">
Change Header 2
</button>
<button data-class="backgroundThree" data-title="Title Three">
Change Header 3
</button>
So if you hover a button, the data-class attribute value from this button is added as a class to your header element. If you stop hovering, the class is removed again so that the default image is shown.
For such questions, I always feel the need to provide a css-only answer since I think nowadays far too much JavaScript (especially JQuery) is used to perform tasks which can be done with pure CSS. Mostly but not always CSS is more performant because it must not be executed and gets cached.
Please see the snippet below. It uses flexbox and the order css rule, which both have a fairly good browser support (unless you must support cripple browsers like older internet explorer versions).
.wrapper {
display: flex;
flex-flow: row wrap;
}
button {
flex: 0 0 auto;
height: 20px;
margin: 0 18px;
}
.wrapper > div {
display: none;
width: 100%;
height: 100px;
margin: 36px 0 18px 0;
order: -3; /* place the divs before the buttons */
}
#content-0 {
display: block;
background: cyan;
}
#content-1 {
background: hotpink;
}
#content-2 {
background: red;
}
#content-3 {
background: blue;
}
#btn-1:hover ~ #content-1,
#btn-2:hover ~ #content-2,
#btn-3:hover ~ #content-3 {
display: block;
}
#btn-1:hover ~ #content-0,
#btn-2:hover ~ #content-0,
#btn-3:hover ~ #content-0 {
display: none;
}
<div class="wrapper">
<button id="btn-1">Button 1</button>
<button id="btn-2">Button 2</button>
<button id="btn-3">Button 3</button>
<div id="content-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div id="content-1">
A wonderful serenity has taken possession of my entire soul, like
</div>
<div id="content-2">
One morning, when Gregor Samsa woke from troubled dreams, he
</div>
<div id="content-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. A
</div>
</div>
(Clearly, the divs can be filled and styled as you like)
<div class="b-wrapper d-flex d-flex-center">
<div class="inner-wrapper">
<h2 class="b-animate h b-from-top b-delay03">Project 3</h2>
<p class="b-animate p b-from-right b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
When trying to add the styles of position: relative; right: -100%; to the h2 element the text moves right 100%. However, if I change the styles to position: relative; top: -100%; the text refuses to move up 100%. I'm assuming this has someting to do with flexbox and positioning. What should I do to fix this?
.d-flex-center {
justify-content: center;
align-items: center;
}
.d-flex {
display: flex!important;
}
.b-wrapper .inner-wrapper {
margin: 0 15px -17px 15px;
}
Top positioning is not working here, because you are using a percentage value, while the container has no height. It would be the same for a positive value too.
To see your top/bottom positioning take effect, either
Give the containing element a height, so the percentage value will be calculated based on that
or
Use a pixel value for top/bottom positioning
Using % value
Parent container must have specified height, so that percentage will be calculated correctly.
.d-flex-center {
justify-content: center;
align-items: center;
}
.d-flex {
display: flex!important;
}
.b-wrapper .inner-wrapper {
margin: 0 15px -17px 15px;
}
.inner-wrapper {
height: 150px; /* container height */
}
h2 {
position: relative;
right: -40%;
top: -20%; /* -20% is now equivalent to -30px (20% of 150px height) */
}
<div class="b-wrapper d-flex d-flex-center">
<div class="inner-wrapper">
<h2 class="b-animate h b-from-top b-delay03">Project 3</h2>
<p class="b-animate p b-from-right b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
Using px value
Pixel value will always be consistent, as it is not calculated based on another value. (No need to specify height on parent container.)
.d-flex-center {
justify-content: center;
align-items: center;
}
.d-flex {
display: flex!important;
}
.b-wrapper .inner-wrapper {
margin: 0 15px -17px 15px;
}
h2 {
position: relative;
right: -40%;
top: -30px; /* -30px === -30px */
}
<div class="b-wrapper d-flex d-flex-center">
<div class="inner-wrapper">
<h2 class="b-animate h b-from-top b-delay03">Project 3</h2>
<p class="b-animate p b-from-right b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>