2

I have a widget like this:

<div class="col-md-12 col-xs-12">
    <div class="col-md-4 col-xs-12">
        1
    </div>
    <div class="col-md-4 col-xs-12">
        2
    </div>
    <div class="col-md-4 col-xs-12">
        3
    </div>
    <div class="col-md-4 col-xs-12">
        4
    </div>
</div>

I am embedding the above widget like this

<div class="container">
    <div class="col-md-12">
        <div class="col-md-3 embedWidget">
            <!-- embeeded-widget-comes-here -->
        </div>
        <div class="col-md-9">
            <!-- some other imp content here -->
        </div>
    </div>  
</div>

When I do this my widget is showing as 4 column grid, But I want it to be stacked format (mobile view col-xs), for all responsive widths

how can I achieve it

I tried with width 100% to embedWidget (content is fixing in that area as 4 col grid)

Mr world wide
  • 4,696
  • 7
  • 43
  • 97
  • Using bootstrap col classes should work... maybe you need to add de "row" class, and not nest "col-" divs directly. – Jorgeblom Jul 12 '18 at 07:35
  • i tried `container->row->col-md-12->col-md-3->widgetCode` but no luck – Mr world wide Jul 12 '18 at 07:35
  • In your widget you are using col-md-4 col-xs-12, Please change to col-xs-12 for all views. Infact, you don't havo to use Grid structure inside widget as you want columns to be stacked, simple use div which is block element – Charu Maheshwari Jul 12 '18 at 07:39
  • @CharuMaheshwari that is where my challenge is.! in one page I need that widget as the same format But in this another page, I need the stacked view. is it possible..? – Mr world wide Jul 12 '18 at 07:41
  • 1
    Well in that case the best I could think of is to apply a css hack... When you have to show stacking all time, simply apply a wrapper class embedWidget-2 and override all of the grid structure inside that hierarchy...embedWidget ->col-md-4 : Width 100% !important. – Charu Maheshwari Jul 12 '18 at 08:00

1 Answers1

1

Why don't you put 100% width on embedWidget for media query for smaller devices.

Hitesh Ramola
  • 322
  • 3
  • 5