-2

On this website, there are many full width parallax images which display on desktop. However when viewed from a mobile device, such as an iPhone 6 - Safari / Firefox, they're nowhere to be seen? How can this be fixed?

j92
  • 35
  • 3
  • 10
  • 1
    Please post your code? It may be a media query problem/choice, but cannot know unless you supply some code :) – EGC Sep 20 '19 at 02:30
  • Hey sure thing. Here's what I currently have for the mobile version: @media only screen and (max-width: 768px) { .parallax_section_holder { background-position: 50% 0% !important; } .section.parallax_section_holder { height: 200px !important; background-attachment: initial !important; background-size: cover !important; min-height: 150px !important; display: block; } } – j92 Sep 20 '19 at 14:44
  • UPDATE: I modified a few things and use the same styling on 3 classes. It's now working. Thanks! `@media only screen and (max-width: 768px) { .parallax_section_holder, .section.parallax_section_holder, .full_width .parallax_content { height: 200px !important; background-attachment: initial !important; background-position: 50% !important; background-size: cover !important; min-height: 200px !important; display: block; } }` – j92 Sep 20 '19 at 14:51

1 Answers1

1

background-attachment: fixed on section.parallax_section_holder, is causing the issue for you. Reset the css property in media query may the fix the problem for you. If you don't require parallax effect on small screen you reset it to background-attachment: initial.

This might help you, have a read.

Note: Its always a good practice to post your code or Jsfiddle.

Sebastian Devassy
  • 117
  • 8
  • Thanks for the reply. I currently have that setup on <768px, however it's not doing anything... @media only screen and (max-width: 768px) { .parallax_section_holder { background-position: 50% 0% !important; } .section.parallax_section_holder { height: 200px !important; background-attachment: initial !important; background-size: cover !important; min-height: 150px !important; display: block; } } – j92 Sep 20 '19 at 14:43
  • UPDATE: I modified a few things and use the same styling on 3 classes. It's now working. Thanks! `@media only screen and (max-width: 768px) { .parallax_section_holder, .section.parallax_section_holder, .full_width .parallax_content { height: 200px !important; background-attachment: initial !important; background-position: 50% !important; background-size: cover !important; min-height: 200px !important; display: block; } }` – j92 Sep 20 '19 at 14:51