Phone View

Resolved crossfirecollect
(@crossfirecollect)

4 years, 3 months ago

Hi there,

I recently had an issue where on my homepage, the metaslider slideshow created a large white gap. I later figured out that this gap was the same size as my second slide, so it was as if they were on top of each other (https://wordpress.org/support/topic/large-gap-when-more-than-1-slide/).

This was resolved by turning lazy loading off. However I have encountered a similar issue with the phone view where it is putting the image on top of each other. Here are the images:

1. https://drive.google.com/file/d/1Vi54ZdeiMMmJf7-I_VrY7PVTFud6g3x9/view?usp=sharing
2. https://drive.google.com/file/d/1PoXkBBqxvVc6I90tj7nqRQry8Afvr2G-/view?usp=sharing
3. https://drive.google.com/file/d/1IJNWOWDytuRflqb7CVWCHklD33RbSEAM/view?usp=sharing

I was wondering if anyone knew how to fix this without disabling jetpack as a whole.

Thanks, Ben

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Arreane
(@yanex)

4 years, 3 months ago

Hi,

We can’t view your Share links. Your shared links are set as private.

Thread Starter crossfirecollect
(@crossfirecollect)

4 years, 3 months ago

Hey Arreane,

Sorry that’s my bad, here are the pictures:

1. https://drive.google.com/file/d/1Vi54ZdeiMMmJf7-I_VrY7PVTFud6g3x9/view?usp=sharing
2. https://drive.google.com/file/d/1PoXkBBqxvVc6I90tj7nqRQry8Afvr2G-/view?usp=sharing
3. https://drive.google.com/file/d/1IJNWOWDytuRflqb7CVWCHklD33RbSEAM/view?usp=sharing

Thanks, Ben
Arreane
(@yanex)

4 years, 3 months ago
Hi Ben,

This happens when the images on your slide has different heights. The slideshow will use the height of your largest image.

You can fix this by making sure that all your images have the same sizes. This can be done by using the smart crop in the advance settings of your slideshow.

However, if you want to have a slider with responsive height according to the current active slide. You can add the following filter to your functions.php
```
function metaslider_flex_params($options, $slider_id, $settings) { 
	$options['smoothHeight'] = 'true';
	return $options;
} add_filter('metaslider_flex_slider_parameters', 'metaslider_flex_params', 10, 3);
```
Thread Starter crossfirecollect
(@crossfirecollect)

4 years, 3 months ago

Hey Arreane,

I’ve checked and all of the images are the same size at 1920×1080. I also have smart crop on and it hasn’t changed. Ill try adding this filter, how do I add this?

Thanks, Ben

Arreane
(@yanex)

4 years, 3 months ago

Hi,

If you check your screenshots, both of this clearly has different dimensions
https://drive.google.com/file/d/1Vi54ZdeiMMmJf7-I_VrY7PVTFud6g3x9/view
https://drive.google.com/file/d/1PoXkBBqxvVc6I90tj7nqRQry8Afvr2G-/view

If you enabled smart crop, both of these images will have the same sizes.

You can add the code snippet I provided in your theme’s functions.php file.

Thread Starter crossfirecollect
(@crossfirecollect)

4 years, 3 months ago

Hey Arreane,

Thanks for your help. I checked and the images are all the same size, but I figured out to fix this particular issue I had to turn carousel mode off.

Thanks, Ben

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Phone View’ is closed to new replies.

Tags