Hi I have responsive menus sliding from right and left, only left, or it could be hidden at all. So the main-content is fluid based on this.
I make it fluid by setting proper margin-left and width properties, which looks like this:
.main-container {
width: 100%;
}
.main-content {
width: 100%;
margin-left: 0px;
}
.main-container:not(.menu-hidden) .main-content {
width: calc(100% - 500px);
margin-left: 250px;
}
#media (max-width: 1200px) {
.main-container:not(.menu-hidden) .main-content {
width: calc(100% - 300px);
margin-left: 300px;
}
}
#media not print {
.main-content {
transition: width 1s, margin 1s;
}
}
#media print {
.main-content {
width: 100% !important;
margin-left: 0 !important;
transition: none;
}
}
<div class="main-container">
<div class="main-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque acipsum elit. Donec malesuada purus quis mauris accumsan tempus. Sed ipsum tellus, ultrices posuere odio eget, aliquet convallis urna. Aliquam pulvinar consequat lectus, a gravida quam mattis sit amet. Curabitur molestie fringilla velit sed cursus. Donec a risus diam. In interdum porttitor sem.
Nullam tincidunt lacus nec leo accumsan aliquet. Integer id justo et urna varius euismod ac non orci. Curabitur sed dignissim nibh, at consectetur augue. Maecenas id tortor id enim maximus laoreet. Etiam id aliquet odio. Integer vel nibh non sapien rhoncus consequat sit amet in nisi. Etiam condimentum vel tortor eu dignissim. Morbi sodales luctus libero non dictum. In fermentum elit et congue efficitur. Vestibulum nunc turpis, posuere vel odio ut, lobortis rutrum sem.
</div>
</div>
https://jsfiddle.net/z7hnstfx/2/
I also added the media print so there will be no margins while printing. But with this declarations it doesn't work in chrome if the screen width is bigger then 1200px...
What is weirdest thing about it, if you remove the transition line, or the declarations in max-width media, it will work. I really run out of ideas what the hell is wrong with it. Anyone can help?
Related
This seems like a simple question, but I couldn't find anything here/with search engines.
Let's first define what I mean by "same": I mean that if I put a ruler (the plastic one) next to the screen, the box would always, in different zoom levels, be the same width in centimeters (whatever that would be).
Let's also say that I'm talking about desktop browsers, since I don't want to complicate things by taking mobile into account. Also the browser should be wide enough to let there be some extra space for zooming.
Here is the box:
https://jsfiddle.net/a4be6ov5/
<div></div>
div {
border: solid 1px #000;
width: 800px;
height: 200px;
margin: auto;
}
Now, if you zoom in/out, the box width will change. The browser's Developer Tools will always show that the width is 200px, because the way this zoom thing works. But what I would actually want, is that I would want it to match the initial width compared to that ruler of ours.
I can partly do that with viewport units, but I couldn't figure out to do it automatically by calculating something. I could only do it by manually defining all the steps at which to change the box width. This turns out to be cumbersome and there are too many steps to do it at. For example I could do this:
#media screen and (min-width: 1500px) {
div {
width: 53vw
}
}
... not very easy.
How to do this automatically for all the screen widths and zoom levels?
What about having a slider on your page which alters the font size of your body element (or selected elements)?
document.querySelector('input').addEventListener("input", evt => {
document.querySelector('.body').style.fontSize = evt.target.value + 'px'
})
.a, .b {
background-color: cyan;
width: 250px;
height: 250px;
padding: 1em;
overflow: auto;
display: inline-block;
box-sizing: border-box;
}
.a {
background-color: cyan;
}
.b {
background-color: lime;
}
<p>
Smaller <input type="range" min="10" max="22" value="16"> Larger
</p>
<div class="body">
<div class="a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel aliquet mauris. Donec ipsum orci, ornare et tellus at, pretium aliquet nibh. Praesent quis tincidunt tortor. Integer ac varius nisi. Integer tempus varius justo. Quisque eget elementum sapien. Mauris id blandit arcu. Mauris dui erat, ultrices vitae ligula vitae, auctor cursus lacus.
</div>
<div class="b">
Cras venenatis, nunc in tempus dictum, justo augue imperdiet nisl, id rutrum eros quam sed arcu. Maecenas fringilla diam in erat venenatis, sed sagittis elit tincidunt. Vivamus vel varius ex, id scelerisque ante. Donec ultricies, urna at aliquet gravida, urna erat porta nibh, vel semper magna urna eu dolor. Nullam condimentum ex ligula, a fringilla tortor eleifend in. Vestibulum congue eget lectus vel congue. Praesent eget malesuada est. Nulla nec semper nunc. Mauris id nulla molestie, varius turpis ut, pulvinar tortor.
</div>
</div>
I'm currently using :before pseudo-element on a 100% width div to display a curved top. This all works fine. I have a fixed height on the :before element. Currently, I'm having to use media queries to keep adjusting the height when the browser width is made smaller. Which isn't ideal. Does anyone know of a JS way of doing it? or even better a pure CSS way? I've attached some code so you can see what I'm doing (best viewing full screen and then adjusting the viewport widths).
My desired result would be to remove all the media query breakpoints and have the height & the top values of the :before pseudo-element and the margin-top of .our-team-panel automatically changed based on the viewport width. I understand because it will involve dynamically changing CSS values I will need the code to be inline (rather than in a separate CSS file).
I have to do this across many different divs. So the curves might be slightly different on each and thus have a slightly different starting height.
.our-team-panel{
background-color: #d4f938;
margin-top: 366px;
position: relative;
padding: 100px 0;
}
.our-team-panel:before {
background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat center bottom -1px;
content: '';
position: absolute;
top: -366px;
left: 0;
right: 0;
width: 100%;
height: 366px;
}
#media only screen and (max-width: 2000px) {
.our-team-panel {
margin-top: 287px;
}
.our-team-panel:before{
top: -287px;
height: 287px;
}
}
#media only screen and (max-width: 1500px) {
.our-team-panel {
margin-top: 216px;
}
.our-team-panel:before{
top: -216px;
height: 216px;
}
}
#media only screen and (max-width: 1000px) {
.our-team-panel {
margin-top: 144px;
}
.our-team-panel:before{
top: -144px;
height: 144px;
}
}
#media only screen and (max-width: 768px) {
.our-team-panel {
margin-top: 111px;
}
.our-team-panel:before{
top: -111px;
height: 111px;
}
}
#media only screen and (max-width: 500px) {
.our-team-panel {
margin-top: 73px;
}
.our-team-panel:before{
top: -73px;
height: 73px;
}
}
<section class="our-team-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>
<p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>
:root {
--flexible-height: 15vw;
}
.our-team-panel{
background-color: #d4f938;
margin-top: var(--flexible-height);
position: relative;
padding: 80px 0;
}
.our-team-panel:before {
background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat left bottom -1px;
content: '';
position: absolute;
top: calc(var(--flexible-height) * -1);
left: 0;
right: 0;
width: 100%;
height: var(--flexible-height);
background-size: auto 100%;
}
<section class="our-team-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>
<p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>
I'm using a clip-path to create a div with a rounded bottom, i.e.:
clip-path: ellipse(80% 60% at 50% 40%);
As the viewport width get smaller and smaller, the angle of the curve becomes more and more pronounced. I want the angle to stay the same no matter the width of the viewport. You can see the problem happening in this fiddle if you increase/decrease the viewport width: https://jsfiddle.net/jvorumk2/
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: ellipse(80% 60% at 50% 40%);
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
If you make the width very narrow, you can see the curve becoming more and more round. If you make the viewport super wide, the curve becomes more flat.
I believe the answer is to change the 80% to a value with a fixed value such as 100rem, but when I do that, the clipping becomes visible at the top of the div on very wide monitors, unless I increase the 100 to a number so great that I flatten the curve at the bottom.
How can I achieve the same effect as seen in the fiddle, but keep the angle of the curve the same no matter how wide the viewport is, including very wide monitors (3840px)? I prefer not to use an SVG clip-path, but if that's the only way, I'm open to it.
You can try like below. A circle with a big radius (as big as you want) and you offset the center to keep the curve at the bottom:
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: circle(4000px at 50% calc(100% - 4000px));
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
margin:auto;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
the same with ellips if you want to control both radius differently:
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: ellipse(4500px 4000px at 50% calc(100% - 4000px));
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
margin:auto;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
Assuming I have the following markup:
<div id='container'>
<div id='content'>
</div>
</div>
And css:
#container {
width: 100%; /* container fills window */
height: 100%;
max-width: 1000px;
}
#content {
width: 100%;
padding-top: 66%; /* (1.5:1 aspect ratio */
object-fit: contain;
}
This has the behaviour I want (even without the object-fit) whenever the
browser aspect ratio is smaller than 1.5:1. I would like the #container
element to always stay completely in view, while also maintaining the aspect ratio.
Is this at all possible in pure css (I do not mind adding extra elements)?
I do not want to use vw and vh because the width of the container is bounded by max-width.
It seems you want something like this:
body {
margin: 0;
}
#container {
position: relative; /* Containing block for absolutely positioned descendants */
float: left; /* Shrink-to-fit width */
background: red;
}
#container > canvas {
display: block; /* Avoids vertical-align problems */
max-width: 100%; /* Like object-fit:contain (part 1) */
max-height: 100vh; /* Like object-fit:contain (part 2) */
}
#content {
position: absolute; /* Take it out of flow */
top: 0; right: 0; bottom: 0; left: 0; /* Same size as containing block */
overflow: auto; /* In case its contents are too big */
}
<div id='container'>
<canvas width="1000" height="666"></canvas>
<div id='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nulla augue. Vivamus hendrerit arcu id fermentum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non efficitur eros. Mauris pulvinar tortor eros, vitae mollis est suscipit non. Sed accumsan mi vel odio sollicitudin sagittis. Curabitur euismod justo et lorem suscipit tempus.Fusce enim metus, maximus sed lacinia ut, ultrices eu arcu. Vivamus interdum ex ac justo pretium pulvinar. Integer ornare vulputate ligula nec imperdiet. Sed suscipit nisi metus. Aliquam massa ante, dapibus laoreet mauris et, dignissim malesuada urna. Vivamus eleifend pellentesque nisl vitae laoreet. Phasellus a fringilla mauris. Nunc condimentum dui est, eget lobortis ipsum feugiat dictum. Vivamus ultricies, nisi ac gravida luctus, leo augue pulvinar massa, sit amet dictum eros magna at justo. Vivamus eu felis a ipsum auctor imperdiet. Donec eget bibendum tortor. Pellentesque mollis, orci ac molestie mollis, mi eros commodo magna, ac rutrum tellus ipsum in tortor. Nulla vel dui egestas, iaculis felis id, iaculis sem.Vivamus vel varius magna. Vestibulum vulputate massa quis urna finibus rhoncus. Etiam varius in dui fermentum venenatis. In fermentum enim sed laoreet porta. Proin sit amet auctor sapien, eu dapibus nunc. Praesent malesuada leo nec libero interdum efficitur. Nulla ipsum est, tristique ut malesuada id, blandit at odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ac ipsum tristique, feugiat justo eu, pellentesque odio.</div>
</div>
It uses canvas with its width attribute set to the maximum desired width, and its height attribute given by the aspect ratio. Then it is styled with max-height: 100vh and max-width: 100% to achieve something like object-fit: contain.
Since #container has height: auto and float: left, its size will be the same as the canvas.
Then you can add some content inside an absolutely positioned element with the same size as #container.
I've tried every CSS-only implementation of sticky footers that exist on the internet it seems, and for the life of me I cannot figure out why it's not working for me.
The problem code is here: https://jsfiddle.net/7ck2xk2p/1/
So the problem is footer is still just sitting under the content, and is not stuck to the bottom of the page.
As you might be able to see, my most recent attempt was the technique detailed here by Ryan Fait
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
I am very new, so if things are messy in that fiddle please excuse me. The relevant details should still be distinguishable though.
What am I doing wrong?
you can use this approach for sticky footer (CSS only)
html,
body {
height: 100%;
margin: 0;
}
div {
min-height: 100%;
/* equal to footer height */
margin-bottom: -70px
}
div:after {
content: "";
display: block
}
footer,
div:after {
height: 70px
}
footer {
background: green
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum vel dolor vel commodo. Nam id nisi eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi commodo leo ac enim molestie, vitae sodales
dolor consequat. Donec imperdiet orci at luctus lacinia. Donec bibendum velit sed risus eleifend ultricies. Sed nisl massa, ornare quis augue et, faucibus feugiat sapien. Vestibulum pharetra tempor quam eu congue. Proin posuere lorem quis nisl efficitur
aliquam. Curabitur elit ex, convallis sed fringilla a, varius quis dui. Nullam eget est sed orci imperdiet imperdiet sit amet eget dui. Integer egestas nisi a sagittis rutrum. Quisque id convallis nisl, at blandit nunc. Curabitur elementum viverra tristique.
In auctor pretium mattis. Fusce vulputate porta lacus tincidunt rhoncus. Aenean dapibus tortor non faucibus laoreet. Morbi fringilla leo nisl, imperdiet hendrerit elit semper at. Donec suscipit orci in nulla viverra ultrices. Donec aliquet risus non
libero viverra, sed aliquam massa congue. Aliquam suscipit ullamcorper erat sed vehicula. Donec elementum tincidunt dolor, non scelerisque dolor pretium ut. Praesent vitae porttitor turpis, et pharetra libero. Sed imperdiet tempor facilisis. Cras eget
vehicula dolor.
</div>
<footer>
Sticky Footer.
</footer>