I have a div that looks roughly like this
<div class="document-teaser" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 7; width: 500px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor sollicitudin magna, ut lacinia nulla accumsan non. Pellentesque nulla risus, pellentesque nec tincidunt nec, commodo quis orci. Suspendisse gravida massa felis. Proin ac nisl id ante vehicula mollis nec a felis. Mauris lobortis tincidunt libero scelerisque faucibus. Morbi tempor nunc a porta pellentesque. Fusce scelerisque diam ac dapibus tristique. Suspendisse finibus maximus nunc, at faucibus lorem commodo nec.</p>
<p>Duis nec nibh feugiat, interdum eros ut, consectetur eros. Praesent eu pretium lectus, eget ornare odio. Duis at sollicitudin augue, at fermentum nibh. Donec ante erat, tristique sed venenatis vitae, suscipit a urna. Maecenas in cursus ipsum, ac fermentum augue. Nulla pretium urna justo, vulputate posuere ante tempor vel. Vestibulum ut ligula congue, gravida ex eget, cursus est.</p>
<p>Donec sed mi faucibus ligula venenatis cursus. Fusce faucibus, arcu vitae sagittis aliquet, dui justo accumsan nisl, eget condimentum lacus velit mattis tellus. Donec sed consectetur urna. In malesuada volutpat augue, quis scelerisque tortor porta quis. Vivamus est metus, vehicula at ultricies ac, ornare vel mi. Donec vel vestibulum ligula. Vivamus sit amet purus odio. Nunc ullamcorper auctor sapien id pellentesque. Phasellus varius ultrices lacinia. Donec a sem ut lacus dignissim bibendum. Cras auctor.</p>
</div>
The styles are added by vue-line-clamp and it works fine on desktop with all viewports.
As soon as I go to my phone, it starts acting up.
The styles are still on the parent, but it is working as if it's applied to all the children. Thus, all p tags get line-clamp to 7, all of them get ellipsis and all have overflow hidden. First of all, this makes all 3 P tags show (which isn't the case on desktop) and it seems like the last two p tags are mushed together so their text is overlapping.
Is the whole webkit box/line-clamp just incompatible with mobile phones or do I need to change something?
For future reference, try also limiting the max-height, in your case for a 7 line clamp, max-height: 8.75 rem might do it, as it did for me. This will also make it work not only on Safari iOS, but also IE, as line-clamp is not supported on IE.
Related
How do i position a centered text or logo (picture 2) at the bottom of the viewport similar to a footer? When the dropdownmenue (picture 3) opens the logo or text should move accordingly to the new height.
So the div below point 5 should dynamically change its height or get out of site in case.
I tried several solutions i googled prior but somehow all did not work like i wanted it to be.
If you know the height of the footer, then you could use min-height, absolute positioning and padding-bottom. However I'm going to assume the more difficult case in which you don't know the height.
<style>
* {box-sizing:border-box;}
.wrapper {min-height:100vh;display:flex;flex-direction:column;}
.main {flex:1 0 auto;}
.footer {background-color:yellow;padding:16px;font-weight:bold;flex:0 0 auto;}
</style>
<div class="wrapper">
<div class="main">
<h1>
Main
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, nibh id placerat viverra, justo purus semper dolor, at lacinia eros mauris eu libero. In finibus a urna dapibus tempus. Aenean ipsum urna, tempor at lectus non, blandit feugiat quam. Donec sed ante orci. Integer laoreet est erat, a feugiat leo posuere sed. Mauris sit amet metus finibus, dapibus nunc ut, molestie erat. Nullam rhoncus sagittis lacus id finibus. Etiam sollicitudin nibh dui, a mollis nisl pharetra vitae. Suspendisse nec laoreet ipsum. Fusce sit amet tempor sem. Vestibulum consequat est in nisl aliquam ornare. Aliquam erat volutpat.
</p>
<p>
Sed vulputate nisl ac est eleifend bibendum. Nullam cursus at ex sit amet dignissim. Sed blandit pretium venenatis. Phasellus at ullamcorper nibh. Aenean nec lectus semper, efficitur diam in, luctus nisi. Phasellus in ligula congue, cursus nunc et, luctus mi. Suspendisse a leo luctus, molestie elit sed, venenatis sem. Nullam lobortis ante nec dictum elementum. Praesent aliquam orci quis molestie consectetur. Aliquam ornare a ipsum dapibus pulvinar. Morbi aliquet posuere ligula, vel volutpat dolor pellentesque vel. Vivamus non euismod leo. Duis feugiat velit a est tincidunt pulvinar. Proin blandit malesuada pulvinar. Nunc ut elementum ex, non vehicula tortor.
</p>
</div>
<div class="footer">
Footer
</div>
</div>
Change the height of your browser up and down to see how this works - the principle is a vertical flexbox that's at least the height of the screen, and a footer that's always at the bottom because the main content grows to fill any spare space.
I'm developing a web app and have a responsive (parallax) full screen background, that is adjusting on screen height and width. Problem is, that on MOBILE the background "ends" above the toolbar. If I'm scrolling down (and later up) with Firefox, I'm getting a jumpy effect with the content that is below the background, because it's adjusting to the toolbar.
I know that it is a well known problem, but I still can't find a fitting solution in my case. I added a screenshot below at what I'm trying to achieve.
I currently have the following:
.page-header-image {
filter: blur(4px);
background-image: url("../../../assets/images/party-blue-kite.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh - calc(100vh - 100%));
width: 100%;
position: fixed; // -> jumpy effect -> nullified through height transitition
// position: absolute; -> laggy on scroll
z-index: -1;
transform: scale(1.5);
transition: height 999999s;
}
What I'm trying to achieve
On mobile devices the 100vh value is indeed altered when the toolbar is visible what causes the jump effect of the background image. Applying a background image with a before on the body element reduces this effect.
body {
font-size: 3rem;
margin: 0;
position: relative;
}
body::before {
background-image: url('https://i.imgur.com/MrGY5EL.jpg');
background-position: center;
background-size: cover;
content: '';
display: block;
height: 100vh;
position: fixed;
width: 100%;
z-index: -1;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan quis ex eu pharetra. Curabitur ullamcorper nisl purus, quis rhoncus ipsum gravida efficitur. Integer sed massa orci. Aliquam et lorem quam. Morbi efficitur purus sit amet ex pulvinar, quis pharetra mauris aliquam. Duis in nunc mattis, fringilla nisl eu, placerat ligula. Etiam ut pellentesque arcu. Nulla facilisi. Vestibulum ac mauris ornare, malesuada odio sed, pharetra dolor. Donec eu elit nisl. Vestibulum purus felis, aliquam quis ultricies vel, pretium at enim. Pellentesque feugiat pulvinar sagittis. Praesent nec arcu nec mauris posuere ultrices nec in eros. Mauris dignissim turpis et dolor aliquet, id tempus elit porta. Nunc convallis aliquam mollis. Mauris nunc nulla, molestie et ultrices a, scelerisque et massa. Duis et diam nec urna rutrum feugiat eu id purus. Morbi convallis elit turpis, quis eleifend nulla viverra eu. Pellentesque vel gravida lacus, eget sodales dui. Vestibulum ullamcorper vesti sit amet nibh. Fusce ac massa felis. Nullam placerat tellus enim, vel congue libero bibendum ullamcorper. Aliquam sollicitudin non massa vel interdum. Vestibulum sit amet nunc condimentum, porttitor purus at, ultrices felis. Duis ultrices accumsan ligula id vestibulum. Donec massa justo, lacinia nec euismod sit amet, euismod non ex. Integer posuere euismod sapien vel convallis. Ut auctor, odio in cursus accumsan, enim magna vulputate dui, ut auctor enim tortor a nibh. Nulla commodo, ex eu placerat pulvinar, mi mi iaculis arcu, a facilisis lectus orci ornare lacus. Donec eget odio venenatis, aliquet augue vel, sagittis dolor. Quisque non dolor nec ipsum lobortis dignissim eget non ebulum nulla. Integer gravida posuere mi, sed pellentesque leo elementum ut. Mauris pharetra neque a commodo congue. Mauris consequat justo lacinia, lobortis mi vel, venenatis turpis. In hac habitasse platea dictumst. Nullam venenatis velit vel pharetra accumsan. Curabitur euismod semper molestie. Etiam blandit, mi lacinia commodo vulputate, leo velit consequat mi, a eleifend magna enimnim. Nunc in rhoncus ligula. Suspendisse consequat ac sem id pharetra. Nulla porta, tortor in rutrum ornare, dui magna consectetur ipsum, in tincidunt urna enim nec dui. Integer laoreet felis sem, at sagittis ipsum ullamcorper vel. Nullam mattis felis eget ipsum dignissim, sed lacinia nisi pellentesque. Sed sodales purus et nisi pretium, eu aliquet leo sagittis. Morbi pharetra, felis non semper ullamcorper, ante mauris condimentum sapien, a ultrices est turpis vel nisl. Curabitur lacus urna, tristique ac pretium a, vestibulum eu libero. Mauris tincidunt tellus ac vulputate tincidunt. Sed ultricies orci mattis diam lacinia sodales. Sed nec felis auctor, bibendum elit et, sodales dui.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I wish to place a modal window just about 100px above center of the screen.
In order to center the item, i'm using the simple display: flex, justify-content: center, align-items: center props on the parent.
Is there any elegant way to achieve the result?
transform might help without the need to set a fixed height:
https://codepen.io/gc-nomade/pen/JyNMRx
div {
transform : translatey(-50%);/* if you do want 100px, update value to -100px */
border:solid;
padding:1em;
background:rgba(255,255,255,.5)
}
body {
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
/* show center X/Y */
background:
linear-gradient(to left,lime,lime) no-repeat 0 0,
linear-gradient(to left,yellow,yellow) no-repeat 0 100%,
linear-gradient(to left,red,red) no-repeat 100% 100%,
linear-gradient(to left,blue,blue) no-repeat 100% 0;
background-size:50% 50%;
}
<div> above center</div>
I'm not sure what you want is a flexbox. If you want the modal to sit overtop of the webpage this is best done with a position: absolute leaving the centering to text-align: center of an inline-block modal. or using margin: auto. This is how I'd achieve this:
.modal-container{
position: absolute;
left: 0;
right: 0;
top: calc(50% - 100px);
text-align: center;
}
.modal{
display: inline-block;
background: lightblue;
padding: 20px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut urna id ex suscipit congue. Aliquam erat volutpat. Duis porta, ex at commodo convallis, lectus ipsum mattis dui, luctus commodo erat nunc eu tortor. Nam dapibus accumsan feugiat. Sed tempor euismod vestibulum. Cras quis vulputate lorem. Aliquam erat volutpat. In eu dolor sem. Nunc sed justo nisl. In cursus velit ut lectus consequat, laoreet pretium augue gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam mi orci, luctus sit amet enim eget, luctus consequat est. Nulla mollis est ut tempus sollicitudin. Aenean feugiat vitae magna a egestas. Sed id fermentum metus.</p>
<p>Pellentesque consequat pharetra quam, varius efficitur sapien efficitur a. Sed pulvinar bibendum velit, lobortis aliquam libero finibus dictum. Nam non dolor imperdiet, bibendum lectus consequat, tempus ipsum. Aenean sollicitudin id mauris vel fermentum. Aenean pulvinar dolor sit amet magna ornare, sit amet commodo lectus eleifend. Aliquam vitae nulla tempus, aliquet massa ut, interdum lacus. Maecenas eu magna aliquet ante ornare feugiat. Donec vel tellus vestibulum, porta augue ut, bibendum quam. Praesent ornare eros vitae massa vulputate efficitur.</p>
<p>Pellentesque eget auctor nisl, vulputate scelerisque elit. Etiam at laoreet est. Fusce vitae lacus dui. Proin sed maximus felis. Sed venenatis euismod neque, ut blandit nisl laoreet sed. Aenean commodo turpis sed diam accumsan aliquam. Proin fermentum ac erat sed ornare. Quisque iaculis massa turpis, eu convallis risus placerat nec. Nunc gravida lectus quis efficitur sagittis. Pellentesque in nisi ex. Duis condimentum congue risus in semper. Proin tincidunt urna dolor, et aliquam justo posuere et. Duis lacinia justo nec condimentum euismod. Suspendisse eros ex, pulvinar id quam in, maximus ullamcorper augue. Donec sit amet sodales magna, eget cursus purus. Cras eget arcu in urna dictum ornare.</p>
<p>Aenean at lacus luctus, eleifend ante hendrerit, rutrum justo. Cras quis tortor dapibus, commodo purus in, ornare metus. Ut sit amet lectus quis tortor iaculis luctus ut et leo. Phasellus tristique rutrum gravida. Mauris vehicula vel turpis a aliquam. Integer arcu leo, iaculis id libero vitae, semper fermentum risus. Proin bibendum magna nisi, nec malesuada velit auctor eget. Aenean bibendum purus ac congue mollis. Nam faucibus cursus rhoncus. Proin ultricies sodales tortor nec pellentesque. Curabitur lacinia mauris lectus, at ultrices leo venenatis eget. Maecenas metus dolor, eleifend ac consectetur id, mollis ornare justo.</p>
<p>Morbi vel rhoncus leo, non pretium urna. Aliquam ac ligula vulputate, scelerisque dolor at, auctor nisi. Aenean eget consectetur urna. Donec quam diam, consequat a porta quis, mollis non diam. Donec urna turpis, dapibus eu enim tristique, placerat consequat quam. Phasellus nec lectus porttitor, posuere tortor vulputate, rhoncus quam. Vestibulum pulvinar tempus elit. Cras id lacus lacus. Donec vulputate quis odio vel tincidunt. Praesent sollicitudin, nulla at lobortis malesuada, nibh dui sodales justo, vel ultrices magna elit sed felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam aliquam, elit eleifend pharetra ullamcorper, massa justo vulputate quam, eget egestas nisi nibh faucibus mi. Phasellus faucibus elit vitae quam sodales congue.</p>
<div class="modal-container">
<div class="modal">This is my modal</div>
</div>
Try to just add margin-top: -100px and see if that works.
Here is a margin-top reference documentation if you ever require it: margin-top W3Schools
I read most of the questions that came up for this, but they do not seem to work. These two in particular seemed to be what I was after, but I don't want the footer fixed to the bottom of the viewport.
How to keep footer always at the bottom of a page?
How to keep always at the bottom of page,( not screen) in html5
Here is my HTML. I am building in Laravel 5.3's Blade templating engine, but using Bootstrap:
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #d3e0e9;
overflow: auto;
padding: 5px 0 5px 0;
p {
margin: 0px;
}
}
<footer class="footer">
<div class="container">
<p>Stuff</p>
</div>
</footer>
EDIT: Attempting to clarify what I am asking here and also removed references above to changing the viewport size. That is cause for confusion and ultimately isn't relevant to what I am asking.
Can take fixed off the table for the time being as that won't be a solution: I don't always want the the footer at the bottom of the view port regardless of content.
Assume the viewport is and will always be full screen on a desktop.
Assume first page one has very little content and a footer below the content.
Relative leaves an ugly gap between the bottom of the footer and bottom edge of the viewport.
Absolute puts it up against the bottom border. This appears to be the correct option for a page with very little content.
Now assume a new page with the same footer, but there is a ton of content with several pages of scrolling in the browser.
Absolute (at least when I am using it) tends to stay at the bottom of the viewport and not below the content.
Relative will put it below the content and will be the solution for this problem.
But now it won't work with the page with very little content.
It seems like I need a mix of these two, but the only thing that comes to mind is using JQuery, testing if the content goes passed the bottom edge of the viewport. If it does, change the CSS to relative from the default absolute.
Seems like there would be an easier way to accomplish this with just CSS.
https://jsfiddle.net/jxg3c6ue/
If you use relative-absolute position relationship. But I would not advice this way of programming. Media query is the most suitable for your project. However, I just answer on how can it be done in other ways.
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p>
</div>
<footer>
this is a footer
</footer>
Without content
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}
<div class="body">
</div>
<footer>
this is a footer
</footer>
There are some good difference between absolute and fixed positioning. You should definitely google it to understand better. Meanwhile in short absolute positioning is done respective of the parent relative / absolute position.
I'm not clear about question since it's too wage to read. Hoping that you are looking something like. Footer always stay bottom to the viewport.
.viewFooter{
background:#ddd;
color:#3d3d3d;
position:fixed;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:calc(1000px - 40px);
position:relative
}
<div class="viewFooter">
This will be positioned at the bottom of the view Port
</div>
Footer staying at the bottom of viewport
.pageFooter{
background:#ddd;
color:#3d3d3d;
position:absolute;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:1000px;
position:relative
}
<div class="pageFooter">
This will be positioned at the bottom of the page
</div>
If you want to switch between absolute and fixed position in different viewport. use media queries. The above given will switch to absolute positioning in mobile devices
.viewFooter{
background:#ddd;
color:#3d3d3d;
position:fixed;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:1000px;
position:relative
}
#media only screen
and (max-width: 600px) {
.viewFooter{
position:absolute;
}
}
<div class="viewFooter">
This will be positioned at the bottom of the view Port
</div>
Make sure the footer div is directly appended to body tag.
I've been practicing with columns lately and I just can't seem to get them right.
This is probably very simple to fix, but I'm pretty bad at web development at the moment. The highlighted section in the picture would obviously look better if it began at the top of the second column, how can I bump it over?
I never know exactly what code to post, so please tell me what you need to see and I'll edit it in as fast as I can.
Thank you for the help!
The break-inside: avoid-column on paragraphs should do the trick, but the browser support is not great. You can try also -webkit-column-break-inside:avoid and page-break-inside:avoid jsfiddle
Try this:
HTML:
<div class="test">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed turpis congue, dignissim nibh eu, ullamcorper neque. Etiam id mi cursus, pellentesque sapien at, volutpat ligula. Sed mattis dapibus dictum. Duis hendrerit ut est in rutrum. Suspendisse in nibh fringilla, congue erat non, euismod eros. Proin at elit ac dolor pharetra gravida quis in quam. Sed fringilla porta quam non tincidunt.
</p>
<p>
Phasellus eget purus et tellus lacinia faucibus non nec massa. Duis mattis vestibulum sagittis. Sed dapibus efficitur velit, vitae lobortis tortor cursus vel. Maecenas eu elementum enim. Nunc porttitor eleifend enim, sit amet dapibus enim hendrerit in. Quisque congue urna ut nulla placerat, ac pretium nisl elementum. Aliquam nec tristique diam. Quisque eget fringilla purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris orci arcu, porta sed ligula vitae, lobortis dignissim massa. Aliquam suscipit finibus augue non tincidunt. Aenean fringilla nulla eget urna ultricies, in imperdiet orci mollis. Pellentesque sit amet mattis ligula, vitae laoreet ex. Mauris molestie sodales condimentum. Vestibulum tortor dolor, scelerisque non molestie nec, mollis eget sapien. Suspendisse commodo magna a est elementum, a faucibus nisl sagittis.
</p>
<p>
Proin facilisis non turpis a consequat. Duis a mi dapibus, tempor velit condimentum, aliquet quam. Ut ut sapien vestibulum orci egestas facilisis. In hac habitasse platea dictumst. Etiam porttitor libero mattis justo finibus, a mattis erat ullamcorper. Donec et ultrices metus, vestibulum dictum est. Sed bibendum sodales egestas. Duis molestie libero at tortor sagittis, sed pellentesque dolor gravida. Pellentesque metus ipsum, varius at gravida ac, maximus id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Morbi gravida imperdiet mauris, id dictum quam congue in. Integer purus justo, pellentesque vestibulum euismod in, finibus ut neque. Sed imperdiet iaculis blandit. Mauris gravida, nibh quis placerat fringilla, nisl nibh tincidunt neque, et tincidunt dolor ex rutrum quam. In non tellus arcu. Sed feugiat nibh ac lectus volutpat, sed varius augue lobortis. Nullam velit magna, laoreet id egestas vitae, luctus et leo. Fusce ultricies dolor blandit nibh pulvinar, vel maximus augue rhoncus. Curabitur posuere, libero nec mollis eleifend, orci sapien sodales mi, non fringilla sem ligula non leo.
</p>
<p>
Maecenas id lobortis nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mattis tortor ut enim laoreet, blandit dignissim augue sodales. Duis a est diam. Phasellus lobortis aliquam tellus. Sed sit amet elit pulvinar, volutpat dui sit amet, tempus dolor. Nam quis feugiat metus. Quisque dictum dui at sapien pulvinar tincidunt. Aliquam at ornare diam. Nam interdum lobortis urna ac aliquet. Integer in sollicitudin metus. Sed rutrum, dolor non venenatis malesuada, velit enim pulvinar dui, ac sagittis massa ante et arcu. Nullam arcu odio, varius porttitor aliquam congue, lobortis at nibh.
</p>
</div>
CSS:
.test {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
.test p{display:inline-block}
Here you can see how text breaks ONLY in paragraphs and nothing else. No need for dirty hacks, br or stuff like that. See fiddle