<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 invesigate with chrome.

I can override it with the !important code, but that left me with issues on apple devives.

<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 al the time)

How can i override the style element width? I'm a beginner at this, so if you need more info let me know.

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;
}