<li> style overrides css with flexslider

Question

I'am using the flexslider from whoothemes in my reposonsive website to display tiles.

The tiles have to have a specific width on different devices and at this point it shows me the following code: <li style="width: 216.6px; float: left; display: block;"> when I investigate with Chrome.

I can override it with the !important code, but that left me with issues 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>

I tried the following things:

• Add class to li, in the code above
• Used jquery to remove width from the style (works, but not all the time)

How can I override the style element width?

Answer 1

You can override the width of the <li> in your CSS by specifying the max width.

An example based on the link you provided:

.flexslider .slides > li {
    max-width: 100px;
}