Slider images not scaling

Hi,
same problem…
my website here .
Also Woocommerce scheduler WooCommerce Scheduler ends to work…

Please help,
thanks

Woocommerce scheduler plugin trouble was due to other so it’s not the same problem. It seems anyway that the CSS on the homepage is not working properly.
the menu item has a different font than before…

I fixed this by adding background-size:cover; to the style definition on line 27 in functions/modality-image-sliders.php.

From:
<li style="background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat;">
To:
<li style="background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat;background-size:cover;">

Please note that I am using Modality version 1.0.4

yep it worked!! ??
The captions title on the images where different before the update, I mean the title was in Bold, all the paragraphs where aligned to the left.
Did it changes to you too? Any guess on how to change it?
Thank you very much indeed

vipticketsroma I am also interested in changing the paragraphs position on the image slider. Also, do you know how to make the image slider pull a featured video from the post rather than the featured image?
Than you very much!

Thanks sjapalucci! Upgraded to 1.04 too and it seems to have fixed my issue, without changing funtions-image-sliders.php

Hi rakin56m
I added this CSS

.banner .inner {
	padding: 0 0 10px;
	margin: 0 auto;
	height: auto;
	width: 80% !important;
	margin-left: 50px px;
	text-align: left;
}

and to make the title in bold as they was before I used this:

#from-blog-wrap h2.boxtitle, .get-in-touch h2.boxtitle, .about h2.boxtitle, #features h2.section-title, #features .feature h3 {
	font-weight: bold !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: inherit;
	font-weight: bold;
	line-height: 1.1;
	color: inherit;
}

be careful I am really a noob ??

Thanks vipticketsroma. I ended up adding this to my CSS

.banner .inner {

padding: 10px;
background: rgba(255, 255, 255, 0.7);
border: 2px solid rgba(255,255,255,.4);
border-radius: 5px;
margin-left: 20px;
margin-top: 50px;

}

.banner .btn {
float: left;
margin-left: 25px;
margin-top: 10px;

color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: none;
text-decoration: none;

border: 2px solid rgba(255,255,255,.4);
border-radius: 5px;
}

It shifts the text box and adds a hazed background behind the text. Now I need to figure out how to make the image slider php pull a video from the blog posts rather than the featured image. Any ideas?

Thanks!

I too have Modality 1.0.4 installed. I made the edit sjapalucci suggested regarding modifying modality-image-sliders.php.

Unfortunately, the slider image still does not scale down when the browser window / device is smaller.

The code posted after sjapalucci seem to address how the text displays. Are there any other suggestions specifically to forcing the slider image to display the entire image (100%) and just scale down? I submitted a question to the author on their website but haven’t heard back yet.

I’d hate to move to another theme when the rest of the functionality works nicely…

I had the same issue as jqmolina because i added a space.

instead of “;background-size:cover;” as above, i had

“; background-size:cover;”

It makes a difference don’t know why. (Hope you haven’t changed themes)

Outalla, thank you for the reply. I am novice at this so I am hacking my way through. I tried ‘cover’ and the image does cover the background area with parts of my image chopped off. Looking at this page -> https://www.w3schools.com/cssref/css3_pr_background-size.asp
I tried the other property values to get a sense of how the background-size function works.

Basically, you can see right from the theme author’s demo pages that the Modality theme is set to have the slider image cover the area but sacrificing what you see, left and right side of image are lost, on a small screen. Conversely, the Terrifico theme fits the entire image on screen but it creates a gap at bottom.

Is there a way to get the slider to be better responsive to browser size?

Modality Theme:
https://vpthemes.com/preview/Modality/

Terrifico Theme:
https://vpthemes.com/preview/Terrifico/

posted this in another thread here but it states resolved, as the issue of the very annoying motorcycle AND the slider images not resizing on mobile devices I decided to drop the same lines here. Copy and paste the following in your editor / modality-image-sliders.php
Use at own risk but does the trick for me

<?php
/**
 * Modality functions and definitions
 *
 * @package Modality
 */

function modality_slider() {
global $post;
$modality_theme_options = modality_get_options( 'modality_theme_options' );
$slider_cat = $modality_theme_options['image_slider_cat'];
$num_of_slides = $modality_theme_options['slider_num'];
$button_text = $modality_theme_options['caption_button_text'];

$modality_slider_query = new WP_Query(
	array(
		'posts_per_page' => $num_of_slides,
		'cat' 	=> $slider_cat
	)
);?>
<div class="clear"></div>
<div class="banner">
	<ul>
	<?php while ( $modality_slider_query->have_posts() ): $modality_slider_query->the_post(); ?>
		<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
		<li style="background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat;background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
		<?php if ($modality_theme_options['captions_on'] == '1') { ?>
			<div class="inner">
				<a class="post-title" href="<?php the_permalink() ?>"><h1><?php the_title(); ?></h1></a>
				<?php the_excerpt(); ?>
			</div>
			<?php if ($modality_theme_options['captions_button'] == '1') { ?>
				<a href="<?php the_permalink() ?>" class="btn"><?php echo $button_text ?></a>
			<?php }; ?>
		<?php }; ?>
		</li>
	<?php endwhile; wp_reset_query(); ?>
	</ul>
</div>
<div class="clear"></div>

<?php
}

function modality_localize_scripts(){
	wp_enqueue_script( 'slides', get_template_directory_uri() .'/js/slides.js' , array( 'jquery' ), '', true );
	$modality_theme_options = modality_get_options( 'modality_theme_options' );
	$animation_speed = $modality_theme_options['animation_speed'];
	$slideshow_speed = $modality_theme_options['slideshow_speed'];
		$datatoBePassed = array(
        	'slideshowSpeed' => $slideshow_speed,
        	'animationSpeed' => $animation_speed,
    	);
	wp_localize_script( 'slides', 'php_vars', $datatoBePassed );
}

add_action( 'wp_enqueue_scripts', 'modality_localize_scripts' );

Hi dielange. I replaced my code with yours. Still not responsive. Specifically, the image is still “zoomed in” when the browser is in a small format. What version of the Modality theme are you using? Pro?

Whats the image size you’re using for the slider?

What slider image settings do you have in the customizer?

Thanks, dielange! This code helped me to make slider responsive in the browser, but it’s still non-responsive on the mobile devices and the title of a slider as well. The text of a slider doesn’t even appear on mobile device…

I did this and it worked:

50% 0 no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;”>

I put that code in line after:
<li style=”background: url(<?php echo esc_url($image[0]); ?>)
on the modality-image-sliders.php