I want to split a webpage into 4 equal quadrants. These quadrants should fill the entire page, and collapse upon window size. The quadrants need to fill the whole viewport of the window.
I can use vh and vw and have it working, but I know it's support is rather flakey.
Ideally, any solution would work with bootstrap.css but not essential.
Many thanks
Just use width: 50% and height: 50% 4 times and add left: 50% and top: 50% with position: absolute;:
div {
height: 50%;
width: 50%;
position: absolute;
top: 0%;
left: 0%;
background: blue;
}
#or {
left: 50%;
background: lime;
}
#ul {
top: 50%;
background: red;
}
#ur {
top: 50%;
left: 50%;
background: yellow;
}
<div id="ol"></div>
<div id="or"></div>
<div id="ul"></div>
<div id="ur"></div>
Related
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
How can an image fill the parent container height, and retain the aspect ratio?
I have used a similar pattern before (see below), but I believe that Bootstrap 4 may be interfering here. When viewing the image in a mobile view port, the image is stretching vertically.
div#parent { position: relative; }
h1 { color: #FFF }
img#child {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -100;
}
<div id="parent">
<img id="child"
src="https://cdn.pixabay.com/photo/2016/07/08/08/59/background-1503863_1280.png" alt="Background" />
<h1>Very very very very very very very very very very very long heading
to go over image in mobile view. The image should not stretch
vertically.</h1>
</div>
Add background-size: contain; to your CSS
img#child {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -100;
background-size: contain;
}
Output:
For more info: https://www.w3schools.com/csSref/css3_pr_background-size.asp
trollsirl.blogspot.com When I minimize my browser my website's title is all the way to the right. How do I make my title centered when my browser is minimized?
.Header.description {
position: absolute;
top: 0%;
left: 50%;
right: -96%;
transform: translate(100%, 180%);
}
h1 {
position: absolute;
top: 5%;
left: 183%;
right: -430px;
bottom: 10px;
transform: translate(10%, 50%);
}
Try to use media queries or body size, look here. Create a css that centeres the header when size is small, for example with margin: 0 auto in the specific class.
This appears to effect only Safari browsers, but all versions I have tested on.
For some reason when rotating an element on the Y-axis, when it is positioned on top of a fixed container, the element cuts through it. Like this;
.fixed-container {
position: fixed;
z-index: 0;
background: skyblue;
top: 0;
right: 0;
left: 0;
height: 400px;
}
.transformed-element {
z-index: 2;
position: absolute;
background-size: contain;
-webkit-transform: perspective(600px) rotateZ(-64deg) rotateX(10deg) rotateY(50deg);
transform: perspective(600px) rotateZ(-64deg) rotateX(17deg) rotateY(50deg);
height: 400px;
width: 600px;
background: url(http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png) no-repeat center center;
}
Here is the jsfiddle of the above code.
Is this intended behaviour or a browser bug? How can I achieve what I want on top a fixed container?
I want to create effect of page corner cliping like in turn.js, I know that I need two divs the outside one need to have positive rotation and inside one need the same amount but negative, and both need translate, but I don't know how to calculate the right values.
How can I do this for each corner?
Here is my try.
Here is my try, for a cut-off of 20px:
.page-wrapper {
position: absolute;
overflow: hidden;
width: 400px;
height: 300px;
top: 50px;
left: 50px;
right: auto;
z-index: 12;
background-color: blue;
}
.outter-wrapper {
position: absolute;
overflow: hidden;
-webkit-transform-origin: 100% 50%;
-webkit-transform: translateX(-20px) rotate(45deg);
right: 0px;
bottom: -100%;
width: 200%;
height: 200%;
}
.inner-wrapper {
-webkit-transform-origin: 100% 100%;
-webkit-transform: rotate(-45deg) translateX(20px);
background-color: yellow;
width: 50%;
height: 50%;
right: 0px;
position: absolute;
top: 0px;
}
You need to make the outter wrapper bigger than the inner wrapper; if not you are clipping in places that you didn't intended. I have done it 20%%; this way the math is easier.
Also, you need to adjust it carefully so that you still know the coordinates of the transform origin.
And you don't really need to move it in x and y, it's enough to mevo it horizontally.
demo