CODEWITHSUNDEEP
htmlcssresponsive-design
Denoteone
Denoteone

Reputation: 4055

Responsive W3.css How to offset my columns

I am using w3.css mobile first css for a test layout I am creating. What I don't understand is how to use w3-col classes to offset my columns 1/3?

For example:

<div class="w3-row">

        <div class="w3-col m4">
        THIS IS THE AREA THAT I WANT TO BE EMPTY. Or not having this div here at all would be good. 
        </div>

        <div class="w3-col m4">
            <p>I am going to put normal content in this column. It should start 1/3 of the row with the left of it being empty.</p>
        </div>

        <div class="w3-col m4">

        </div>

</div>

I know in bootstrap they have a class to offset the current column a specific amount. So in my example above The row would be cut up into 3 columns all equal width:33.3333%; but the first column wouldn't have anything in it.

My Findings: When I try to just leave the first column empty the width is 0px. Also when I go down to mobile screens I want all of my columns to go to 100% but that means my empty one would too and that doesn't make any sense since I wont need it anymore.

Is it possible to accomplish my layout with the responsive w3 css?

Upvotes: 2

Views: 779

Answers (1)

CoderJoe
CoderJoe

Reputation: 447

Force a minimum width if there is nothing in the div and if on mobile devices hide it

.custom{
  min-width: 480px;
  max-width: 1024px;
  height: 1px;
}

@media only screen and (max-device-width: 768px) {
	.custom{
    display: none;
  }
}
<div class="w3-row">

        <div class="w3-col m4 custom">
        THIS IS THE AREA THAT I WANT TO BE EMPTY. Or not having this div here at all would be good. 
        </div>

        <div class="w3-col m4">
            <p>I am going to put normal content in this column. It should start 1/3 of the row with the left of it being empty.</p>
        </div>

        <div class="w3-col m4">
          Last column
        </div>

</div>

Upvotes: 2

Related Questions