css trick to disable parallax effect on phones- help please
Clash Royale CLAN TAG#URR8PPPcss trick to disable parallax effect on phones- help please
//html code for parallax - help required here. I have added div for parallax with name parallax and parallax css in stylesheet. please note. any help in disabling it for the mobile and desktop view will be appreciated.Thanks. I had gone through numerous posts but no help.
but I don't want it to be disabled for desktop. I just want it to stop working for the mobile. Can something be done about it? when i use the media query it disables on my desktop but works fine on mobile. any help. it's urgent
</head>
<style>
@media only screen and (min-width: 320px) and (max-width: 989px) {
.parallax {
background-attachment: scroll !important;
}
//parallax code
.parallax {
/* The image used */
margin-top: 30px;
background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>
any suggestions will be appreciated.
1 Answer
1
What you're looking for is known as a media query, which is denoted by wrapping your selector in @media screen and (min-width: x). Anything within this @media tag will only get applied to devices matching the specified criteria (in this case, a minimum width).
@media screen and (min-width: x)
@media
Simply set the minimum width to correspond to the width of the smallest device you wish to include for the parrallax effect. A list of common devices and their corresponding widths can be found here, but you'll probably want something like 480px.
480px
Here's a full example:
@media screen and (min-width: 480x) {
.parallax {
/* The image used */
margin-top: 30px;
background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
