rj1102 Posted February 18, 2016 Share Posted February 18, 2016 (edited) 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> Edited February 18, 2016 by rj1102 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 18, 2016 Share Posted February 18, 2016 Because w3-col by default is floated left with 100% width, and by you adding inline styling equalling 100% tbey WILL sit side by side what ever width of device. You are supposed to use sub classes to change widths depending on device width. 1 Link to comment Share on other sites More sharing options...
rj1102 Posted February 18, 2016 Author Share Posted February 18, 2016 (edited) Thanks dsonesuk I now use "w3-col s12 m5 l5"/"w3-col s12 m5 l5"/"w3-col s12 m2 l2", and this works responsively! Edited February 18, 2016 by rj1102 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now