The min-width not working but the max-width yes.
This is the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is my code:
#media only screen and (min-width: 1301px) {
.video-banner {
width: 100%;
height: 575px;
margin: 0;
background: white;
}
}
#media only screen and (max-width: 1300px) {
.video-banner {
width: 100%;
height: 250px;
margin: 0;
background: white;
border: 1px solid white;
}
}
Related
AOS fade in should work on scroll, but setting overflow-x and y interferes with the effect. Nothing happens on scroll, fade in only works when i resize the window. I'm using this library: AOS Library
main {
height: 120vh;
perspective: 2px;
overflow-x: hidden;
overflow-y: auto;
}
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.no-parallax {
height: auto;
background-color: #000000;
}
.no-parallax_footer {
z-index: 999;
width: 100%;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: 8;
}
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-quad',
});
</script>
Does someone know how to work around this problem?
I found the same problem here, but it doesn't work on mine.
Solution is to add: <script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>
I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.
You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>
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
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.
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