I am trying to make an application that is responsive to a full screen computer size and portrait and landscape sizing on a phone. I can get the full screen and portrait sizing to work, but when I switch to landscape, the landscape css media query does not work. Any ideas on what is going on? Here is my css:
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 2) {
.landing-header {
margin-top: 18%;
}
.landing-h {
font-size: 145px;
}
.auth-box {
position: absolute;
top: 58%;
left: 35%;
margin-left: -15rem;
margin-top: -26.5rem;
width: 60rem;
height: 80rem;
overflow: hidden;
}
.user-auth {
padding-top: 35%;
}
.greeting {
margin-top: 6%;
margin-left: 7%;
font-size: 35px;
text-align: center;
}
.login-form, .register-form {
font-size: 40px;
}
.login-form input, .register-form input {
margin: 3%;
}
.landing-button {
margin: 2%;
width: 50%;
font-size: 60px;
}
}
#media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.landing-header {
margin-top: 9%;
}
.auth-box {
position: absolute;
top: 98%;
left: 35%;
margin-left: -22rem;
margin-top: -26.5rem;
width: 72rem;
height: 20rem;
overflow: hidden;
}
.greeting {
margin-left: 34%;
margin-top: 2%;
margin-bottom: 1%;
font-size: 16px;
text-align: center;
}
}
.user-auth {
padding-top: 9%;
}
.landing-button {
margin: 0%;
width: 12%;
font-size: 16px;
}
.login-form, .register-form {
font-size: 18px;
}
.login-form input, .register-form input {
margin: 2%;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.auth-box {
width: 61rem;
height: 18rem;
top: 95%;
left: 40%;
height: 23rem;
}
.landing-button {
font-size: 20px;
width: 18%;
margin: 1%;
}
.greeting {
margin-left: 30%;
margin-top: 2%;
}
.login-form input, .register-form input {
margin-top: 6%;
margin-bottom: 1%;
}
}
OK, I think I see what's biting you. In addition to the max and min being the same as I'd pointed out in the comments, somewhat counter-intuitively you need to use the same width & height values for both portrait and landscape modes. So, a device like the iPhone is always going to have a smaller value for its device width than its device height as its "native" orientation is portrait. If you make your width media query for the landscape mode match what you've got for portrait, it'll likely do what you want.
Related
I am trying to practice simple CSS Animations with Keyframes.
I am trying to move the square from left to right, however, this does not seem to be working with position relative/absolute. I works when I do transform: translateX(...) or something similar, but not with the aforementioned method. Any ideas why?
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: relative;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
So, in the Keyframes you had right
100% {
top: 0px;
right: 500px;}
where as it needed to be left
100% {
top: 0px;
left: 500px;}
full code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: reletive;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 500px;
/*here*/
}
}
i already see the answers to similar problems with mine tried the solutions and nothing worked.
so i have an image categories flexbox with 7 images per row when it resizes to mobile display it goes to 3 per row. everything works fine in all browsers except safari that sticks to 3 in row no matter the screen size
here is the css:
`.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 50px;
margin-bottom: 30px;
}
.responsive-image {
max-width: 100%;
}
.responsive-images {
max-width: 100%;
}
.box img {
display: block;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.box {
max-width: calc(100% / 7);
border: 4px solid white;
height: 100%;
}`
`#media screen and (max-width: 700px) {
.box {
max-width: calc(100% / 3);
}
}`
where box is the cell
stack!
I have an animation that is assigned to the class .slide
I have on hover on a div, when I hover over the div I want the animation class be assigned to another div. Using CSS animations.
I'd appreciate the help and thanks!
Code:
http://codepen.io/iheartkode/pen/wWMQmG?editors=0110
share-container {
position: relative;
width: 150px;
height: 75px;
background: #FF5722;
border-radius: 10px;
cursor: pointer;
&:hover {
// assign animation class to the share-icons class
}
p {
text-align: center;
color: white;
}
}
.share-icons {
position: absolute;
z-index: -2;
top: 15px;
left: 4px;
margin: 0 auto;
width: 120px;
height: auto;
padding: 10px;
background: coral;
text-align: center;
color: white;
font-size: 2em;
cursor: pointer;
}
.slide {
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
Edited after your clarification:
Change this in your HTML:
<div class="share-icons slide">
And this in your SCSS:
&:hover .slide {
// assign animation class to the share-icons class
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
And then adjust the animation as needed.
And here's a fork in action:
http://codepen.io/denmch/pen/WxrLQZ
heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox
I have checked possibilities and issues with frameworks. Bootstrap has additional code and some code need to be modified.
I enclose my code CSS and I kindly ask you to check and inform me if this is correct, specially position elements.
.carousel {
height: 250px;
margin-bottom: 20px;
margin-top: 10px;
}
.carousel-caption {
z-index: 20;
}
.carousel-caption {
left: 10%;
padding-bottom: 30px;
right: 10%;
}
.carousel .item {
height: 250px;
}
.carousel-inner > .item > img {
height: 250px;
left: 0;
min-width: 100%;
position: relative;
top: 0;
}
.carousel-control {
width: 5%;
}
.carousel-control.left, .carousel-control.right {
display: block;
float: left;
height: 250px;
width: 5%;
}
.carousel-control.left {
background: url("../images/left1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-control.right {
background: url("../images/right1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-indicators {
bottom: 10px;
left: 40%;
list-style: none outside none;
margin-left: -20%;
padding-left: 0;
position: absolute;
text-align: center;
width: 50%;
z-index: 15;
}