cssmaterialize

Materializecss: how to make image cover full width within grid

I am new to css and try using materialize. I create row with 2 columns. the left column is for image, the right column is for the text.

This is my html structure:

<div class="section">
    <div class="row">
      <div class="col s12 m12 l8">
         <img src="imgae_url_here.jpg" alt="" class="responsive-img">
      </div>
      <div class="col s12 m12 l4 headline-right">
        <p class="category">CHROMECAST</p>
        <h2 class="feat-article-title">Here’s to five years of Chromecast</h2>
        <p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p>
        <a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a>
      </div>
    </div>
</div>

The screenshot is does have the same width with row as shown below.

enter image description here

How to make the image full width same as row? the yellow line in the screenshot shown above is what I want covered with that image. how to achieve that? Thanks!

Solution 

  • <html>
<head>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<style>
</style>
<body>
    <div class="row no-padding">
      <div class="col s12 m12 l8" style="overflow:hidden">
        <img src="https://placeimg.com/1080/480/any" style="margin-left:-12px">
      </div>
      <div class="col s12 m12 l4 headline-right">
        <p class="category">CHROMECAST</p>
        <h2 class="feat-article-title">Here’s to five years of Chromecast</h2>
        <p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p>
        <a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a>
      </div>
	  
</body>
</html>

    here is your requested answer. Hope this will help :) Revert me back for any problem or queries