Hiding Parallax Effect

Support Area Forums Moonrise Hiding Parallax Effect

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://louisejehafricanpaintings.com
  • Author
    Posts
  • #37977

    Dare Adelugba
    Participant

    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

    #37981

    Bill Robbins
    Moderator

    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

    #37987

    Dare Adelugba
    Participant

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

    #37988

    Bill Robbins
    Moderator

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Hiding Parallax Effect’ is closed to new replies.