Jump to content
rj1102

w3-col responsive?

Recommended Posts

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 by rj1102

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...