I have implemented the flexslider by whoothemes on my responsive website to showcase tiles.
However, I am facing an issue with setting a specific width for the tiles on various devices. Upon inspecting with Chrome, I see this code:
<li style="width: 216.6px; float: left; display: block;">While I can use the !important code to override it, this causes problems on Apple devices.
<ul class="slides">
<?php
$args = array(
'posts_per_page' => -1,
'post_type'=> 'cinema',
'orderby'=> 'title',
'order'=> 'ASC',
'include' => get_option( 'sticky_posts' )
);
$args2 = array(
'posts_per_page' => -1,
'post_type'=> 'cinema',
'orderby'=> 'title',
'order'=> 'ASC',
'exclude' => get_option( 'sticky_posts' )
);
$mypost_1 = get_posts( $args );
$mypost_2 = get_posts( $args2 );
$myposts = array_merge($mypost_1 , $mypost_2);
$start = '<li><ul>';
$end = '</ul></li>';
foreach ( $myposts as $key=>$post ) : setup_postdata( $post );
if( $key != 0 && $key % 3 == 0 ) echo $end;
if( $key == 0 || $key % 3 == 0 ) echo $start;
?>
<li>
<a href="<?php echo get_post_meta($post->ID,'link',true) ?>">
<img alt="" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>" />
</a>
</li>
<?php
endforeach; wp_reset_postdata();
if( $key == 0 || $key % 3 == 0 ) echo $end;
?>
</ul>
In order to address this issue, I have tried: - Adding a class to li in the provided code - Utilizing jQuery to remove the width from the style attribute (though it's not consistent)
If anyone can advise on how to effectively override the width set in the style element, I would greatly appreciate it. As a novice in this field, feel free to ask for more information if needed.