rj1102

Thanks dsonesuk I now use "w3-col s12 m5 l5"/"w3-col s12 m5 l5"/"w3-col s12 m2 l2", and this works responsively!

Why is the next code not responsive? I mean, if I make the screen smaller, the columns will stay horizontally. Or see the example on w3schools: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_percent&stacked=h. Also this example seems to be non responsive. <div class="w3-row"> <div class="w3-col" style="width: 40%; background-color: silver"> <p>[w3-col 40%]Lorem ipsum dolor sit amet.</p> </div> <div class="w3-col" style="width: 40%; background-color: green"> <p>[w3-col 40%]Lorem ipsum dolor sit amet.</p> </div> <div class="w3-col" style="width: 20%; background-color: red"> <p>[w3-col 20%]Lorem ipsum dolor sit amet.</p> </div> </div>

I could not find a seperate W3.CSS forum, so I've posted my question here. See html output below: Using w3-half, how can I achieve that the white space under the green div is also filled with green (or the silver div filled out with silver if this div happens to be the shortest, the text is dynamic)? Code: <div class="w3-content"> <div class="w3-row" style="background-color: yellow"> <p>Test</p> </div> <div class="w3-row"> <div class="w3-half" style="background-color: silver"> <p>[w3-half] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="w3-half" style="background-color: green"> <p>[w3-half] Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="w3-row" style="background-color: yellow"> <p>Test</p> </div> </div>