Search code examples
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 coloumn is for image, the right coloumn 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 image is not have same width with row as shown bellow.

enter image description here

How to make the image full width same as row? the yellow line in the image 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