transform: translate feature makes the logo blurred - html

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.

Related

problematic rotate() function ~ transform rotate and translate not working for single element [duplicate]

This question already has answers here:
How to apply multiple transforms in CSS?
(9 answers)
Closed 11 months ago.
I am trying to rotate the button 180 degrees. I found out that when the 'rotate()' function is called before the 'translate()' one, the rotation doesn't work.
My question is: Why it works like that?
1st code(not working):
.btn--right {
right: 0;
top: 50%;
transform: rotate(180deg);
transform: translate(50%, -50%);
}
2nd code(working):
.btn--right {
right: 0;
top: 50%;
transform: translate(50%, -50%);
transform: rotate(180deg);
}

Because you cannot specify two transform's on one element. The second set of CSS is working because the rotate is positioned last in the DOM order. Therefore it is overriding the translate. You'll notice if you add !important; to your first set of CSS (the one not working), it will work just fine as demonstrated in the snippet.
You can achieve rotate and translate on a single element you can write it like so:
transform: rotate(180deg) translate(50%, -50%);
.btn--right {
right: 0;
top: 50%;
transform: rotate(180deg)!important;
transform: translate(50%, -50%);
}
<button class="btn--right">Send</button>

The second transform property overrides first one
transform: rotate(180deg);
transform: translate(50%, -50%);
transform: translate(50%, -50%); applies
transform: translate(50%, -50%);
transform: rotate(180deg);
transform: rotate(180deg); applies
body {
height: 100vh;
background-color: bisque;
display: grid;
place-items: center;
}
.btn--right{
display: grid;
place-items: center;
background-color: red;
height: 100px;
width: 100px;
right: 0;
top: 50%;
transform: rotate(180deg);
transform: translate(50%, -50%);
/* transform: translate(50%, -50%);
transform: rotate(180deg); */
}
.btn--right p {
color:white;
}
<div class="btn--right">
<p>Hello</p>
</div>

Web Development 90" stickable button right side screen

I'm trying to create a button that sticks to the right sidfe of the screen. I want this button the turn 90" and stick 50% vertically. I can't find alot of help online, maybe you guys can help. See my code below, it currently isn't vertically aligned centred.
I also added a picture of how it looks. Thanks in advance!
My current code:
HTML
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
CSS
.button {
position: absolute;
display :flex;
align-items: center;
justify-content: center;
z-index: 999;
top: 50%;
right: 0;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
Picture 2

body {
margin: 0;
}
.button {
position: fixed;
z-index: 999;
top: calc(50% - 120px);
left: unset;
right: -51px;
-webkit-transform: rotate(-90deg) translate(-50%, 0%);
-moz-transform: rotate(-90deg) translate(-50%, 0%);
-o-transform: rotate(-90deg) translate(-50%, 0%);
-ms-transform: rotate(-90deg) translate(-50%, 0%);
transform: rotate(-90deg) translate(-50%, 0%);
}
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
<div style="height:100vh;"></div>
<div style="height:100vh;"></div>

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

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/

Top part of pop-up modal cuts off screen when screen is reduced in size

The top part of my modal gets cut off the screen when the screen is reduced (it disappears under the bookmarks and address bar) . I have tried the solution at this link (to set top and bottom to 0) but not working for me.
My css is as follows:
/* Modal Content/Box */
.modal-content {
padding: 20px;
border: 1px solid #888;
width: 50%;
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
width: 50%;
padding: 0px 20px 15px;
background: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Any help would be very much appreciated.
Regards, Mike

It sounds like your content is too large for the window? If that's right, then set max-height: 100vh; and the modal won't grow beyond the window's height, whilst your code above should continue to center it.

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%);
}