Css problem

Hello,

I have a page on my clubs website that displays perfectly on desktop view but not in mobile view. I know it’s down to my sloppy code or css. Could someone have a look and see what might be wrong? The page in question is here:

https://dsac.co.uk/memberslist/

Thanks

<?php /* Template name: memberslist */ ?>

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.6
 */

get_header(); ?>

  <style>
    ul.ccard {
        font-size: 0.75em;
        list-style-type: none;
        width: inline-block
        float: left;
        margin: 0 25px 0 0;
        border: 1px solid #ccc;
        padding: 5px;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }

    ul.ccard li.cimg {
        float:left;
        margin: 10px;
    }

    ul.ccard li.cname {
        font-size: 1.25em;
        padding: 5px;
        color: #33f;
        font-weight: bold;
    }

        ul.ccard li.desc {
        clear: both;
        float:left;
        margin: 10px;
    }
</style>

		<div id="container">
			<div id="content" role="main">

            <div class="member-list">

			<?php
			/* Run the loop to output the page.
			 * If you want to overload this in a child theme then include a file
			 * called loop-page.php and that will be used instead.
			 */

       $blogusers = get_users_of_blog(); //get all registered users
    foreach ($blogusers as $bloguser) {
        $user = get_userdata($bloguser->user_id); //get data about each user as an object
        $diverlevel = get_cimyFieldValue($bloguser->user_id,'diverlevel');
        $instructorlevel = get_cimyFieldValue($bloguser->user_id,'instructorlevel');
        $lifeguard = get_cimyFieldValue($bloguser->user_id,'lifeguard');
        $sdcs = get_cimyFieldValue($bloguser->user_id,'sdcs');
            // create a flat array with only the fields we need
            $allusers[$user->ID] = array(
                'last' => $user->last_name,
                'first' => $user->first_name,
                'nicename' => $user->user_nicename,
                'mobile' => $user->mobile,
                'email' => $user->user_email,
                'address' => $user->address,
                'description' => $user->description,
                'diverlevel' => cimy_uef_sanitize_content($diverlevel),
                'instructorlevel' => cimy_uef_sanitize_content($instructorlevel),
                'sdcs' => cimy_uef_sanitize_content($sdcs),
            );
    }
    asort($allusers);   // sort the users by last name
    ?>
    <?php
    foreach ($allusers as  $auser) {
                if ($auser['nicename'] != 'admin') { ?>

                <ul class="ccard">
    <li class="cimg"><?php echo get_avatar( $auser['email'], $size = '120', $default = 'https://dsac.co.uk/wp-content/uploads/2013/01/default.jpg' ); ?></li>
    <li class="cname"><?php echo $auser['first']." ".$auser['last']; ?></li>
    <li><?php echo '<strong>Diver grade:</strong> ' .$auser['diverlevel']; ?></li>
    <li><?php echo '<strong>Instructor grade:</strong> ' .$auser['instructorlevel']; ?></li>
    <li><?php echo '<strong>SDCs:</strong> ' .$auser['sdcs']; ?></li></br></br>
    <li class="cdesc"><?php echo do_shortcode ($auser['description']); ?></li>

</ul>

    <?php } } ?>

            </div><!-- #content -->
		</div><!-- #container -->
        </div><!--end member_list class-->

<?php get_sidebar(); ?>
<?php get_footer(); ?>