Search code examples
htmlcssmaterialize

card-content on materialize not fit in its class

i am used card materialize in my page the page looks like this

cards

you can see my card content and description is in my image, i follow guide from materialize but it not work in my page

this is my code

    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">
            <!-- Favicons-->
            <link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/apple-touch-icon-152x152.png">
            <meta name="msapplication-TileColor" content="#FFFFFF">
            <meta name="msapplication-TileImage" content="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/mstile-144x144.png">
            <link rel="icon" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/favicon-32x32.png" sizes="32x32">
            <title>Home</title>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <!-- Materialize core CSS -->
            <link href="<?php echo base_url(); ?>assets/home-user/materialize/css/materialize.css" rel="stylesheet" type="text/css">
            <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
                <script src="assets/js/html5shiv.js"></script>
                <script src="assets/js/respond.min.js"></script>
            <![endif]-->
            <link href="<?php echo base_url(); ?>assets/home-user/template.css" rel="stylesheet" type="text/css">
        </head>
<body>
            <div class="container">
                        <div class="row">
                    <div class="col s12 m7">
                      <div class="card">
                        <div class="card-image">
                          <img src="http://materializecss.com/images/sample-1.jpg">

                        </div>

                        <div class="card-content">
                        <span class="card-title">Card Title</span>
                          <p>I am a very simple card. I am good at containing small bits of information.
                          I am convenient because I require little markup to use effectively.</p>
                        </div>

                        <div class="card-action">
                          <a href="#">This is a link</a>
                        </div>
                      </div>
                    </div>
            </div>
        <script src="<?php echo base_url(); ?>assets/home-user/assets/js/jquery.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/home-user/materialize/js/materialize.js"></
        <script src="<?php echo base_url(); ?>assets/home-user/index.js"></script>
</body>

i dont know whats wrong with my code thanks

Solution

  • load materialize css and js files and also jquery file... here is a working snippet

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
   <div class="container">
            <div class="row">
        <div class="col s12 m7">
          <div class="card">
            <div class="card-image">
              <img src="http://materializecss.com/images/sample-1.jpg">

            </div>

            <div class="card-content">
            <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>

            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
</div>