Mobile Optimize site: remove Parallax image

Beaver Builder
1

Hi All,

I’m optimizing a BB site (theme and plugin) for mobile. One important step is to not load large background images on small screen sizes. I accomplished this with the following:

@media screen and (max-width: @small-device-breakpoint) {
  	.fl-row-bg-photo .fl-row-content-wrap,
	  .fl-row-bg-parallax .fl-row-content-wrap {
		    background-image: none;
	  }
}

This is working great for the background images, they aren’t even being called from the server. However, the parallax images are still being called and loaded before getting hidden. Do you have a solution for causing the parallax images to not be loaded at all for mobile screens?

Thanks!

2

Hey Skyler,

Thanks for posting! Parallax images are still loaded as background-images so if you set it to none, it shouldn’t load that image any longer. You may want to add more selector to that though or mark it important since on mobile, the CSS changes to

.fl-builder-mobile .fl-node-560d091b14968 .fl-row-content-wrap {
  background-image: url(http://demos.fastlinemedia.com/wp-content/uploads/sites/4/2014/06/street.jpg);
  background-attachment: scroll;
  background-position: center center;
}

Hope this helps!

Ben