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.
Related
I have exactly the problem from this question but I can't comment (as I have less than 50rep).
It has to do with getting a better performance out of blurring a full screen image through GPU acceleration but not having the sides "leaking".
If you don't mind adding an additional div, you can add a wrapper and apply the transformation to it.
I checked in Chrome Dev Tools and indeed Chrome rendered the wrapper #bg into a separate layer, although this kind of optimizations are very browser specific.
I would recommend reading https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
I would give you another suggestion however, instead using a big image and blur it, you can use the same image at a very low resolution (say 10x10 px) and make it full-screen. Almost the same result, but with far lesser bytes to load.
html {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: red;
position: relative;
width: 100%;
min-height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transform: translate3d(0,0,0);
}
#bg > div {
background-image:url('http://lorempixel.com/1920/1920/');
background-size: cover;
position: absolute;
left: -60px;
top: -60px;
right: -60px;
bottom: -60px;
filter: blur(60px);
}
<div id="bg">
<div></div>
</div>
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>
My intention is to center a header <div>, but i'm not able to do it.
header {
height: 54px;
margin:0px auto;
width: 1150px;
background: #13171B;
position: fixed;
left: 0;
top: 0;
z-index: 990;
margin-bottom:10px;
}
Please help me.
margin: 0 auto can center elements in static or relative position only. Since your div is in fixed position you may try with
header {
position: fixed;
height: 54px;
width: 1150px;
...
left: 50%;
margin-left: -575px; /* 1150px/2 */
top: 0;
}
if you don't know in advance the width, a better solution involves css3 transformations, e.g.
header {
position: fixed;
height: 54px;
...
left: 50%;
transform: translateX(-50%);
top: 0;
}
My go to solution for centering is thus;
.parent {
position: relative;
}
.toCenter {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
This positions the .toCenter element vertically and horizontally centered to it's .parent.
If you needed to position only horizontally, each 'translate(-50%-50%)' in the element's style would become 'translateX(-50%)'. Similarly, if vertical alignment was required, you could use 'translateY(-50%)' instead.
The important thing here is that there is a limit to browser support. Essentially everything except IE will work fine, with anything from IE9 backwards causing issues. There are poly fills and hacks to get things to work however, and they're usually neater than having to create additionally classes or style sheets just for one piece of functionality.
It's because of the fixed position. Add/change the properties below:
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
I have a screenshot class similar to screenshots found on dribbble.com, when I hover over it I display a link icon. I made it responsive up untill the part where my background image(the link icon) stays the same size and it looks really large when I downscale the rest.
How can I make sure that the background img of the link-icon class downsizes aswell when I scale down the browser?
.screenshot .link-icon {
background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
position: absolute;
padding: 8.02139037433155%;
border-radius: 100%;
position: absolute;
z-index: 1;
top: 39%;
left: 42.25352112676056%;
}
So I kind of need to make my background url image responsive. Hope I said it right?
You need to define the height for that purpose:
.screenshot .link-icon {
background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
position: absolute;
padding: 8.02139037433155%;
border-radius: 100%;
position: absolute;
z-index: 1;
top: 39%;
left: 42.25352112676056%;
height: 1em;
}
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