CODEWITHSUNDEEP
htmlcssmaterialize
David Ifaola
David Ifaola

Reputation: 51

Materialize divs not showing side by side

Hey guys I am new to materialize css. I was building a site but I have a problem align two divs side by side: one with an image and the other with a text. Here's my code and a picture of the problem I am facingthe image:

<div class="row" style="box-shadow:0 2px 5px 0 rgba(0,0,0,0.16);width:90%;background-color:chocolate;">
          <div class="col s12">
               <img src="img/testifier1.jpg" style="height:400px;width:40%;">
          </div>  
          <div class="col s12">
               <h3>Psalm 119:2</h3>
          </div>
</div>

Upvotes: 0

Views: 1884

Answers (1)

acupofjose
acupofjose

Reputation: 2159

You should be setting the columns to be side by side in the classes. Currently you are saying, for all screen sizes, (size small and up) display each column as 12 / 12, however you want each column to be 6 / 12, so for small screens we default to each column being full width, and for screens larger than 'small' (m6 or medium) we want to go to a 6 / 12 size.

<div class="row">
    <div class="col s12 m6">
        <img src="img/testifier1.jpg">
    </div>  
    <div class="col s12 m6">
        <h3>Psalm 119:2</h3>
    </div>
</div>

*Note the m6 addition

You should also try and stay away from inline styling, and add modifying classes if you wish to change the way your html is styled.

Upvotes: 2

Related Questions