Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Cannot remove bullet point from flexslider

I've already installed FlexSlider JS and CSS to the homepage, and included the necessary jQuery for the homepage. For some reason, I keep getting a bullet point above my homepage slider image and my background-color only wraps around that.

Help please! :)

    <div id="featured" class="clearfix flexslider">

    <ul class="slides">
        <?php

        $args = array(
                'post_type' => 'work'
            );

        $the_query = new WP_Query( $args ); 

        ?>      

        <?php if( have_posts()) : while ( $the_query->have_posts() ): $the_query->the_post(); ?>
    <li style="background-color: <?php the_field('background_color');?>">
    <div class="container">
        <div class="grid_8">
            <img src="<?php the_field('homepage_slider_image'); ?>" alt="<?php the_title();?> Project Screenshot">
        </div>
        <div id="featured-info" class="grid_4 omega">
            <h5>Featured Project</h5>
            <h3 style="color: <?php the_field('button_color');?>"><?php the_title();?></h3>
            <p> <?php the_field('description');?></p>
            <a class="btn" style="background-color: <?php the_field('button_color'); ?>" href="#">View Project &rarr;</a>
        </div>
    </div>
    </li>   
        <?php endwhile; endif; ?>
    </ul>
</div>

2 Answers

Adam Moore
Adam Moore
15,825 Points

.slides li { list-style: none; }

should work..

if not something is overwriting it and you may have to use an !important to make sure it's taking.. Or use the dev-tools to see what's overwriting your css

Giorgia Makris
Giorgia Makris
3,377 Points

I am also having this same problem, here is my mark-up:

<?php get_header(); ?> </div> <div id="featured" class="clearfix flexslider">

        <ul class="slides">

            <?php
                $args = array(
                    'post_type'=>'work' 
            );

        $the_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $the_query ->have_posts() ) : $the_query ->the_post(); ?>
        <li style="background-color: <?php the_field( 'background_color' ); ?>">
            <div class="container">
                <div class="grid_8">
                    <img src="<?php the_field( 'homepage_slider_image' ); ?>" alt="<?php the_title(); ?> Project Screenshot">
                </div>
                <div id="featured-info" class="grid_4 omega">
                    <h5>Featured Project</h5>
                    <h3 style="color: <?php the_field( 'button_color' ); ?>"><?php the_title(); ?></h3>
                    <p><?php the_field( 'description' ); ?></p>
                    <a class="btn" style="background-color: <?php the_field( 'button_color' ); ?>" href="<?php the_permalink(); ?>">View Project &rarr;</a>
                </div>
            </div>

        </li>
        <?php endwhile; endif; ?>
        </ul>

</div>

where in the css do you suggest adding the .slides code?

Giorgia Makris
Giorgia Makris
3,377 Points

Also want to add that the list is only showing up in Google Chrome, meanwhile an empty space pushing the slider over to the right shows in Firefox.

Thanks!! I really appreciate it, worked perfectly.