How to disable parallax on mobile and tablet views?

0 votes
asked Sep 13, 2017 by johnstont05

I know this has been answered before but I would like for someone to show me how to disable my specific code on mobile and tablet view. Every time I use a parallax and then view my site on my mobile or tablet, it zooms the image far into where it is not recognizable at all. How can I avoid this? Thank you.

.parallax {
   height: 800px;
   width: 100%;
   background-attachment: fixed;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
}
<div class="parallax" style="background-image: url('https://s3.amazonaws.com/media.ohi/15678_vegancooking_2o.jpg');">
   <p class="photog" style="color:#FFF;">name here</p>
</div>

2 Answers

0 votes
answered Sep 13, 2017 by shadow-fiend

Try this

@media only screen and (max-width:749px) {
  .parallax {
    background-attachment: scroll;
     background-size: 100% 100%;
   }
}

Sample fiddle..

+2 votes
answered Sep 13, 2017 by james-solomon-belda

try this

@media only screen and (max-width:749px) {
  .parallax {
    background-attachment: inherit;
  }
}

just reset the background-attachment on mobile.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...