im creating simple website. On desktop, whole content is centered ok. It works also with changing size of browser.
But when I visited it on mobile, everything is not centered like on desktop
Take a look: http://piaskownica.lokalnamanufaktura.pl/metod2/
I think that my css wrap class for centering is buggy. Videobackground also is not centered on desktop.
.wrap {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
}
.x2-horizontal has a width of 380px that is too wide for small screens. Watch out for fixed widths in responsive designs.
Your layout method is not ideal. For a start, think of devices that don't support transform.
The video control won't center using margin: auto because of position: absolute. You'd have to use the same kind of centering methos as for the other content (i.e. left: 50% and then pulling it back 50% of its width.)
The issue is that the wrap is getting crushed too small to contain all of the elements. Perhaps you could use a media query to reduce their size on mobile. A simple solution for this case would be
#media (max-width: 600px) {
body {
zoom: .8;
}
}
which would reduce the size of the whole body to 80% so that it doesn't overflow and wrap to new lines. In addition, if you want to center your background video, try changing the bottom and right to 50% instead of 0 in the #video_background, and also add your transform lines onto that.
#video_background {
position: fixed;
bottom: 50%;
right: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(50%) translateY(50%);
}
Related
Ages ago, I copied and pasted approach 1 from this answer by Josh Crozier to center a div vertically and horizontally:
.container {
width:100%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
For result, see image, below left. But now I need the div to align top, instead of center/middle. I've tried 4 different changes to the css (see image):
Change top: 50% to top: 0. Result: top 50% of div is off the screen;
Delete all transforms, change top: 50% to top: 0. Result: 50% of div is off the screen at right;
Change top: 50% to top: 43%. Result: div aligned top;
Delete all transforms, change top: 50% to top: 43%. Result: 75% of div disappears bottom right.
I'm happy that 3) worked. But I have no idea why 43% is the magic number. Maybe it isn't exactly. I arrived at it by trial and error, load and reload. Is there a better way to do it?
It's working like that because you are changing the coordinates of the object with the translateY property. If you delete all of the translateY properties or set them to 0 like this: translateY (0); and add top:0; it will align to the top of the window.
You can read more about how translate works here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
Here's how your css should look:
.container {
position: absolute;
top: 0;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
I have a background image with some objects like a company logo. This image is a full screen background and I want to align an element with the company logo and make it responsive.
I have searched for some similar solutions and tried using a solution proposed in this link:
How to position an element relative to the background image width
Although I am able to position the element correctly, it doesn't remain in the same place relative to the image when the screen is resized.
How can I keep this html element always aligned?
body {
width: 100%;
height: 100%;
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.container{
position: relative;
}
.fixed-title{
position: absolute;
top: 0;
margin: 28% 0 0 54%;
}
<div class="container">
<h1 class="fixed-title">Apple</h1>
</div>
Edit: Coupled with what I wrote below, this should be what you're after :) All that is left to do is change the percentages to match the position you're after. If you need to move something in px you can use calc() css function to do
height: calc(100% - 100px);
This would make your thing 100% of the height - 100px.
body {
width: 100%;
height: 100%;
position:relative
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.title-container{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
<body>
<div class="title-container">
<h1>My Title</h1>
</div>
</body>
It looks like you are halfway there already having used postionion:absolute already.
I would suggest instead of using margin:28% 0 0 54% to look into using the transform property coupled with translateX() and translateY() or the shorthand version translate( , );.
The solution below puts your title in the very center of the container.
.fixed-title{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
This solution only centers your h1 on the Y axis (up and down)
.fixed-title{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This solution only centers your h1 on the X axis (left and right)
.fixed-title{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hopefully this helps :)
P.s. Here is a link to a great article on all the uses for the transform property : https://css-tricks.com/almanac/properties/t/transform/
I need to Center and crop image with CSS. I have followed this article.But device UI output is somewhat different. Can you explain the behavior of this?
This is the use case:
We don’t want to actually crop - just display the middle of the image.
Some of the docs people will upload will be docs so don’t want this to
be stretched.
My question is I don't know why it transforms (1 image) landscape mode even though I got the image using portrait mode? Any explanation?
photo {
.photo {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.portrait {
width: 100%;
height: auto;
}
}
}
<div class="photo">
<img [src]="data?.url class="portrait">
</div>
UI:
1 - It shows when I used the device in portrait mode
2 - when I used device in landscape mode
Runtime code:
You can achieve it by
img {
object-fit: cover;
}
It works the same as background-size: cover but it's used for img tags instead of background images
Reference
I am currently trying to design a long scrolling website using bootstrap and I can't find a way to actually to place more than one image without them actually overlapping each other. What I'm looking for is something similar to this
https://www.flickr.com/
Any help would be much appreciated.
This is the CSS I used to make the image full screen but for some reason everything I add after that will just pile up on it and not underneath it.
.bg-img{
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Edit: made code visible
When positioning an image to be absolute it does not take up any space in the flow. This way it hides whatever comes after it.
One solution would be to add a wrapper and also use viewport units. Here's a JSFiddle
.wrapper {
height: 100vh;
width: 100vw;
}
.bg-img {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Absolute is your issue here, this takes everything out of flow so none of the elements are aware of each other. Try floating or diplay: inline-block etc.
I have a full screen background image for my website landing page with my logo in the centre. The website uses Bootstrap and is fully responsive. The logo is vertically and horizontally aligned in my browser window and when the window is resized the logo correctly stays in the centre. But when viewing on a phone or tablet the image background images resizes correctly but the logo does not stay in the centre of the page, but is situated to the right of the screen with half of it obscured.
Any ideas on how I might rectify this? The website landing page is live you can find it at www.burnser.com
Here's the code:
<img alt="full screen background image" src="img/bg.jpg" id="full-screen-
background-image" />
<div class="centered">
<a href="work.html"><img src="img/home_logo.png" alt="BB Logo" width="200"
height="137"></a>
</div>
And here's the CSS I'm using:
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Any help would be much appreciated.
Looks fine on my phone. Try another browser and also try to prefix transform.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Btw, 1MB background image is huge. You should blur that noise out to reduce size of image.