Hiding Parallax Effect

[Dare Adelugba]

Hi Bill,

Is there a way to hide the parallax effect on small devices? When viewing the home page on small devices the “sections” are showing as fixed displays which doesn’t look good. I would like to leave first section and hide the rest when viewing on small devices, if possible.

Thank you,
Dare

[Bill Robbins]

Hi Dare,

Mobile devices don’t support items that are “fixed” in place. They are rather expensive from a memory perspective and can potentially keep items blocked on a page so Apple and Google have both decided to just not allow that.

You’re welcome to hide any of the images and sections you’d like to with a CSS media query. A media query is a bit of CSS that only applies when a condition like browser width is met. So to hide an image on a smaller screen you would use something like this:

@media only screen and (max-width: 767px) {
	#two .mobile-picture-block {
		display: none;
	}
}

which would hide the mobile version of the parallax image when the browser is 767 pixels wide and narrower. You can repeat that for any of the home sections you’d like to.

Take care,
Bill

[Dare Adelugba]

It doesn’t seem to work. However, I applied it under “Inspect Element” tool and it works. Not sure why.

[Bill Robbins]

I made a copy of the source code of your front page and added this to the custom CSS spot there:

@media only screen and (max-width: 767px) {
	#two .mobile-picture-block {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	#three .mobile-picture-block {
		display: none;
	}
}

which did hide the second and third mobile background images when the screen was less than 768 pixels wide. I did notice this in the Custom CSS:

@media only screen and (min-width: 767px) {
		div#two {
			display: none;
		}
	}

which would hide the entire second block when the browser window is 768 pixels wide and larger, but not in smaller windows. Play around with that and see what you can cook up.

[Author]

Posts