How to make the contents not leave (carousel BS4)? - html

I want to make a slider, on which there will be a form or any other text.
But when scaling at + 50-75%, as well as with large contents, this content goes beyond.
Image
jsfiddle.net/sL70r2an/


Change position absolute to fixed for .overlay-startpage
.overlay-startpage {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
http://jsfiddle.net/mn4y8exu/

Related

transform: translate feature makes the logo blurred

my web site retrokent.com
My problem is the logo is blurry. transform: translate and webkit-transform: translate
.nm-header.centered .nm-header-logo {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The problem is solved when I turn off the "transform: translate" and "webkit-transform: translate" features.
But then the logo is position shifting. How can I fix it? Can you help me?
screenshot-1 : https://prnt.sc/tr16j4
screenshot-2 : https://prnt.sc/tr16te

You can center your image without transform: translate(-50%, -50%) just change in your css.
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 10;
for responsive you can set text-align: center with media queries.

responsive video makes white spaces in mobile screen

I have a page that have responsive video in it, it works great in laptop or any wide screen, but i face a problem of white space above nad below the video in vertical screen like mobiles, i used following ccs code:
.background-video {
position: fixed;
z-index: -10;
top: 0;
right: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(50%, 0);
-moz-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
-o-transform: translate(50%, 0);
transform: translate(50%, 0);
background: url(../video/video.jpg) no-repeat;
background-size: cover;
}
.section-video {
position: relative;
background-size: cover;
background-position: 50% 50%;
height: 100vh;
z-index: 0;
}
.section-video .bgvid {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
}
here is live preview:
http://shiftmkt.sa/tec/

Try this.
Let me know if you need any changes.
body{
margin: 0;
padding: 0;
}
.section-video .bgvid {
width: 100%;
height: 100%;
}
<div class="section-video">
<video autoplay="" poster="video/video.jpg" class="bgvid" loop="">
<source src="http://shiftmkt.sa/tec/video/video.webm" type="video/webm">
<source src="http://shiftmkt.sa/tec/video/video.mp4" type="video/mp4">
<source src="http://shiftmkt.sa/tec/video/video.ogv" type="video/ogv">
</video>
</div>

Bgvideo won't play in Chrome

I have tried to put a background video in the first page of the site.
With Safari, IE and Mozilla, the video expands to full screen mode, but not in Chrome. Any advice? Here is the site for reference: http://www.camarche.es
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
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%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}

Set the content mid-page with CSS3

<div style="width: 100%; position:fixed; display: block;" class="parent">
<div class="child" style="width: 100%; height: 30px; ">mid</div>
</div>
I am going to set the div with the 'child' class in the mid-page using css.
The parent div's position will be fixed.
how do I have to do?

To position an element centered in the screen:
/* Staple class for V and H centered element */
.vertical-and-horizontally-centered-element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* support for cross browser compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
To center the text within in the center of the element use text-align: center. After we put together all your code, you get the following result:
.parent {
width: 100%;
height: 100%;
position: fixed;
display: block;
}
.child {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
/* support for cross browser compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child">mid</div>
</div>
Another comment, move your inline CSS to its own CSS file, unless you must keep it inline for specific reasons... my two cents :-)
Let me know if you have any questions in the comments below.

Here is everthing centered: https://jsfiddle.net/16q2xr8k/5/
.parent{background-color: lightblue;}
.child{
background-color: lightgreen;
text-align: center;
margin-left: 50%;
position: relative;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Using CSS to vertically rotate from it's original top left not the center axis

How do you vertically rotate text on IE8+
The elements I want to vertically rotate are positioned absolutely and require to be in the same place.
<div id="parent">
<div id="child_1">
</div>
<div id="child_2">
</div>
</div>
CSS:
#parent {
position: absolute;
width: 300px;
height: 300px;
}
#child_1 {
postion: absolute;
top: 250px;
left: 50px;
width: 100px;
height: 10px;
}
#child_2 {
postion: absolute;
top: 200px;
left: 10px;
width: 100px;
height: 10px;
}

There is a hack for IE8 using filter however this requires positioning of element for IE separately but I can live with this.
IE8:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
IE9+:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);