BlueOwlCreative » Topic: Homepage on mobile

Homepage on mobile

MOconcepts — Wed, 06 Jan 2016 10:21:13 +0000

Hi,

In mobile view the image with particles effect is pretty large. Is it possible to make this smaller on mobile?

http://wonderflow.media-monkey.nl/

Thanks!

Reply To: Homepage on mobile

BlueOwl — Thu, 07 Jan 2016 11:53:41 +0000

Hi again,

Yes, you can add a custom class to the element where you add the big paddings, then add some custom CSS with a media query for the small resolutions to force smaller paddings for small screens.

Reply To: Homepage on mobile

MOconcepts — Thu, 07 Jan 2016 12:14:36 +0000

This reply has been marked as private.

Reply To: Homepage on mobile

BlueOwl — Thu, 07 Jan 2016 12:21:08 +0000

If you send me credentials to your admin I could do it for you! (use a private reply)

Reply To: Homepage on mobile

BlueOwl — Thu, 07 Jan 2016 12:22:07 +0000

Also, do you leave out that spacing on top of your page(s) below the header? It’s an option under Fortuna Page settings.

Reply To: Homepage on mobile

MOconcepts — Thu, 07 Jan 2016 15:18:07 +0000

This reply has been marked as private.

Reply To: Homepage on mobile

MOconcepts — Sat, 09 Jan 2016 15:53:02 +0000

Is it also possible to turn the particles effect off on (only) mobile?

Reply To: Homepage on mobile

BlueOwl — Mon, 11 Jan 2016 12:48:11 +0000

Hi again,

Well that’s the easiest way to explain it – you add a custom CSS class to the element (while editing any element you can add CSS classes to them) where you add the big paddings, then add some custom CSS (you need to know some css to do this) with a media query for the small resolutions to force smaller paddings for small screens. The rest is the actual CSS stuff.

As for the particles you need to add an additional check in the common.js file for mobile:

if(jQuery('#particles_animation').boc_doesExist()) {
	if(jQuery('#particles_animation').hasClass("particles_on_top")){
		particlesJS('particles_animation','particles_animation','top');
	}else {
		particlesJS('particles_animation','particles_animation','bottom');		
	}
  }

replace with :

if((jQuery('#particles_animation').boc_doesExist()) && (!boc_is_mobile)) {
	if(jQuery('#particles_animation').hasClass("particles_on_top")){
		particlesJS('particles_animation','particles_animation','top');
	}else {
		particlesJS('particles_animation','particles_animation','bottom');		
	}
  }

Reply To: Homepage on mobile

BlueOwl — Mon, 11 Jan 2016 14:07:55 +0000

So the padding is now done, here’s how I did it, added the “main_padded_holder” class to your row, then added the custom CSS to the page settings (the cog icon):

@media only screen and (max-width: 768px) {
.wpb_row.main_padded_holder {
    padding-top: 100px!important;
    padding-bottom: 100px!important;
}
}

What it does is sets a custom padding for the resolutions smaller than 768px

Reply To: Homepage on mobile

MOconcepts — Mon, 11 Jan 2016 20:11:43 +0000

Thanks for the explanation, looks good!

I replaced the code to turn off the particles effect on mobile, but unfortunately it’s still there..