.w3 CSS - Center narrow DIV in wide CONTAINER

99
September 17, 2019, at 04:50 AM

I've used Bootstrap 3 and am pretty familiar. I'm now learning w3schools CSS framework. I'd like to know how to center a smaller div (panel) within a container on large screens and display the div as a block element on small screens.

In Bootstrap 3 I would:

<div class='container-fluid'>
   <div class='row'>
       <div class='panel-default col-md-8 col-md-offset-2 col-xs-12'>
       <div class='panel-body'
           <p>My Content Here</p>
       </div>      
       </div>
   </div>
</div>

The above gives me a panel 8 columns wide, centered (albeit by virtue of 2 col offset) on a large screen. On a phone it will display the panel as a block element - occupying full screen width.

I'd like to accomplish the same within the .W3 CSS framework. I've tried:

  <div class='w3-container'>
        <div class="w3-row w3-center">
            <div class="w3-panel w3-threequarter">
                <p class="left">My Content Here</p>
            </div>
        </div>
  </div>

Or... Do you create empty div's equiv to "Bootstrap -offset- spec" that are only visible on a large screen?

  <div class='w3-container'>
        <div class="w3-row-col ">
                <div class='w3-col w3-container l2 s0'></div>
                <div class='w3-col w3-container l8 s12 w3-mobile'>     
                   <p class="w3-center">My Content Here</p>
               </div>
        </div>
    </div>

Except that the above code stacks the div's instead of side-by-side...

READ ALSO
how can I combine a group statemant with a calculation?

how can I combine a group statemant with a calculation?

I would like to normalize a column(= divide by sum()) I tried this:

52
How to stop insert data in second table if value is $open_bal = 0.00

How to stop insert data in second table if value is $open_bal = 0.00

I want to stop insert data if my $open_bal is 0

127
Sorting WP Query results

Sorting WP Query results

I am running a user query on my wordpress site to list sales repsBasically I have a page listing all users that are in the 'sales reps' role, and using jQuery to hide/show them based on a state dropdown selector

97