When browser get resized absolutely positioned after pseudo-element overflows and causes problems. I am looking for a way to fix this. Just resize the browser until you reach header text.
Here is a demo of the problem: http://codepen.io/anon/pen/grKNoJ
.section {
font-family: 'Quantico';
font-weight: bold;
font-size: 36px;
color: white;
border-top: solid 1px black;
text-transform: uppercase;
margin-bottom: 28px;
}
.section-title {
background-color: black;
display: inline-block;
padding: 8px 18px;
position: relative;
}
.section-title:after {
content: " ";
position: absolute;
display: block;
right: 0;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #000;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
You can fix it by adding text-overflow: ellipsis; and white-space: nowrap; to .section-title.
You could also set a max-width to that element, and set it to different values according to your media queries, and have it serve your needs on different devices.
Here is the updated result: http://codepen.io/johnnykb/pen/mPKZLg
Related
Here is a simple ribbon I want to position at the left upper corner of the screen:
.ribbon {
width: 200px;
background: #e43;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #ffffff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
font-family: "Open Sans Regular";
font-size: 1.5em;
top: -10px;
left: -80px;
height: 80px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: fixed;
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
As you see the New word on the green ribbon is not totally visible because it is on the upper edge of the rectangle.
How can I position the ribbon's text on the lower edge of the rectangle so that we can see it correctly.
I used the below flex postioning on the ribbon class but it pushes the text to the right and not the center:
display: flex;
justify-content: flex-end;
align-items: flex-end;
You can update your code like below:
.ribbon {
background: #e43;
color: #ffffff;
font-size: 1.5em;
position: fixed;
top: 0;
left: 0;
transform: translateX(-50%) rotate(-45deg);
transform-origin:top;
padding:40px 100px 0; /* adjust the 40px to control the height (the 100px need to be a big value) */
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
I am working on a website. It has a page to show in which I show several Images . I have come across a problem that the pictures that I have taken with my dslr at vertical angle () are rotating automatically when opened in my mobile phone.
This is my html:
<div class="product-img container" style="width: 95% !important; margin-bottom:10px;">
<img src="{{product.disimage.url}}" alt=""> </div>
and this is the css that is linked to class product-img:
.latest-product-area .single-product .product-img {
margin-bottom: 30px;
position: relative;
}
.latest-product-area .single-product .product-img img {
width: 100%;
}
.latest-product-area .single-product .product-img .new-product {
position: absolute;
top: 25px;
left: 23px;
}
.latest-product-area .single-product .product-img .new-product span {
background: #ff003c;
padding: 3px 16px;
border-radius: 30px;
color: #fff;
}
.single-product .product-img {
position: relative;
overflow: hidden;
}
.single-product .product-img .p_icon {
width: 90%;
padding: 7px 30px;
position: absolute;
bottom: -100px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background: rgba(37, 119, 253, 0.4);
transition: all 400ms ease;
}
.single-product .product-img .p_icon a {
display: inline-block;
height: 36px;
line-height: 40px;
width: 36px;
text-align: center;
background: #fff;
border-radius: 30px;
color: #415094;
margin-right: 25px;
}
.single-product .product-img .p_icon a:last-child {
margin-right: 0px;
}
.single-product .product-img .p_icon a:hover {
color: #fff;
background: #2577fd;
}
.single-product:hover .product-img .p_icon {
bottom: 0px;
}
.new_product .product-img {
padding: 90px 0px;
}
When I open it on desktop there is no problem. But when I tested in several devices in two devices the vertical images auto rotated while in one it was normal. I have attached two pics to show the problem. Please help me fix it.Also I am working this on a django website so the images are being uploaded in the admin(database) then shown here.
The image above was taken horizontally (landscape) and is showed correctly. While the Image below(names UTt) WAS TAKEN vertically (potrait) but it is autorotating which I dont want it to be.
Maybe this can help you? https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
Browser seems to read the Metadata of your Image and choose appropriate orientation automagically. Using this CSS you should be able to force it the way you want, though I'm not so certain about Browser Cross-compatibility with this. You might have to check on that.
A note: The original post were deleted with its user, and as I found it could be useful, I reposted it.
The rectangle should be rotated -90deg and be centered vertical in the left side of the screen. As you can see in the picture below.
If possible, only HTML and CSS should be used.
The problem is, to first rotate the element, which makes it more difficult to center it.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<div>Lorem Ipsum</div>
To better control the rotation, and more easily both left align and center it vertically, use both the transform-origin and transform.
First make its left/top corner as the center of the rotation by adding transform-origin: left top; to the div.
Second, by combine rotate and translate, move it half of its own width to the left (translateX(-50%)), and then rotate it 90 degrees counterclockwise rotate(-90.0deg).
Note 1; When using more than one <transform-function> value, they execute from right to left, which in below sample mean it starts with translateX.
Note 2; I temporary removed the prefixed properties, so you need to add them back.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top;
transform: rotate(-90.0deg) translateX(-50%);
}
<div>Lorem Ipsum</div>
Update after a comment.
Here is 4 fiddles, showing 4 steps, that hopefully make it more clear how this works:
Step 1 - Step 2 - Step 3 - Step 4
Here is an animation, showing how it moves, and hopefully make it more clear how this works:
html, body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
}
.faked-body div {
position: absolute;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top; /* the rotation center is moved to black circle */
transform: rotate(0)
translateX(0);
animation: the-div 3s 1s forwards;
}
#keyframes the-div {
0% { transform: rotate(0)
translateX(0);
}
50% { transform: rotate(0)
translateX(-50%); /* move to left */
}
100% { transform: rotate(-90deg) /* rotate 90 degree */
translateX(-50%);
}
}
/* styling/info for this demo */
.faked-body div::before {
content: '';
position: absolute;
top: -10px;
left: 0;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
animation: the-spot 1.5s 1s forwards;
}
.faked-body {
position: relative;
margin: 10px 60px;
width: 440px;
height: 200px;
background-color: #ccc;
font-size: 14px;
}
.faked-body::before {
content: 'The gray area represents the body so we can see how the "Lorem Ipsum" element moves';
color: #666;
}
.faked-body::after {
content: 'The black spot show where the rotation center is';
color: #222;
position: absolute;
bottom: 0; left: 0;
}
#keyframes the-spot {
0% { left: 0;
}
100% { left: 50%;
}
}
<div class="faked-body">
<div>Lorem Ipsum</div>
</div>
We can use the 'text-orientation' property instead of 'rotate'.
I tried the below code and it worked for me.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
align-content: center;
}
body > div {
background-color: #ff0000;
color: white;
font-weight: bold;
padding: 10px;
width: auto;
height: auto;
writing-mode: vertical-rl;
text-orientation: upright;
}
Create another parent div to 'Lorem Ipsum' and apply "display: flex;
align-items: center;
align-content: center;" properties to the parent div to avoid giving flex to 'body' tag.
Hope it helps.
Understood. Please try the below css, it may solve your issue.
body, html {
height: 100%;
display: grid;
font-size: 16px;
font-family: Arial, sans-serif;
}
div {
margin: auto auto auto 10;
background-color: #FF0000;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
padding: 10px;
}
FYI: I tested this on chrome and safari and working.
I am having some issues with absolute objects on a website. Z-index essentially won't work correctly. I may be being a little dumb?
Here is the website: http://www.mascots.ds-demo.co.uk/
The blue and yellow characters need to be behind the hero cta buttons 'learn more' and 'get a quote' however i cant get them to work with z-index.
CSS on characters:
.character-blue-float {
position: absolute;
float: right;
top: 7%;
left: -20%;
z-index: 1000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
.character-blue-float img {
width: auto;
max-width: 800px;
height: auto;
}
CSS on Buttons:
.home-hero-cta {
margin-top: 30px;
z-index: 2000;
}
.btn-outer-lrg {
padding: 10px 20px;
color: #08788c;
border: 2px solid #08788c;
border-radius: 5px;
font-size: 22px;
background-color: transparent;
margin-right: 10px;
font-family: 'Fredoka One', cursive;
}
apply below css to hero-home and check
.hero-home {
z-index: 1001;
position: relative;
}
it should work
I m trying to make vertical float button for my website but this is what I m getting. Text is outside box
CSS
#feedback {
height: 104px;
width: 104px;
position: fixed;
top: 40%;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback a {
display: block;
background: #f00;
height: 15px;
width: 70px;
padding: 8px 16px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #333;
border-left: solid 1px #333;
border-right: solid 1px #fff;
}
#feedback a:hover {
background: #06c;
}
HTML
<div id="feedback">
Test
</div>
The height: 15px is what that causes this issue for you. Everything is fine otherwise. Remove the height from #feedback a and it will be alright.
#feedback a {
display: block;
background: #f00;
height: 15px; /* Remove this... */
Height of an element is generally set by the content and the line-height. If you try to manually set, it goes out of context with the contents. That's what just happened now.