CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
codefreaK
codefreaK

Reputation: 3662

bootstrap mobile first layout issue

Please check my demo .I have been trying to implement this please hover above any plan block with different grid size i have some how managed to make it work all the grid sizes except col-xg(<768px).Here on hover the div breaks and shows irregular behavior.Below i have added the sample how i want block to render <768px grid and on hover block has to change to blackish color

enter image description here1 This is the Second Issue uneven height dsa I am trying to build a page from the scratch and so please be kind enough to point out my mistakes

FIDDLE

HTML

<div id="Container_Plans">

            <div class="rows">

                        <div class="col-lg-2 col-md-2 col-sm-2 ">


                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">



                             <div class="products_Container">

                                    <div class="Product_Plan">

                                       <span class="PlanName">
                                            #01
                                       </span>



                                    </div>
                                    <div class="Product_Feature">
                                       <span class="Feature_Content">
                                       <h2>Compact Plan</h2>
                                       <p><span class="break">DDNS Feature for </span>remote viewing </p>

                                        <div>
                                      @ RS 10000 /- 
                                        </div>
                                        free Dns Subscription for a year
                                         </span>
                                    </div>

                            </div>  


                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">


                            <div class="products_Container">

                                                            <div class="Product_Plan">

                                                               <span class="PlanName">
                                                                    #02
                                                               </span>



                                                            </div>
                                                            <div class="Product_Feature">
                                                               <span class="Feature_Content">
                                                               <h2>Regular Plan</h2>
                                                               <p><span class="break">DDNS Feature for </span>remote viewing  </p>

                                                                <div>
                                                             @ RS 21000 /- 
                                                                </div>
                                                                free Dns Subscription for a year
                                                                </span>
                                                            </div>

                                                    </div>  

                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-3  col-xs-12 ">
                            <div class="products_Container">
                                        <div class="Product_Plan">

                                           <span class="PlanName">
                                                #03
                                           </span>



                                        </div>
                                        <div class="Product_Feature">
                                           <span class="Feature_Content">
                                           <h2>Performance Plan</h2>
                                           <p><span class="break">DDNS Feature for </span>remote viewing </p>

                                            <div>
                                          @ RS 45000 /- 
                                            </div>
                                            free Dns Subscription for a year
                                             </span>
                                        </div>


                            </div>
                        </div>
                        <div class="col-lg-1 col-md-1 col-sm-1">


                        </div>

            </div>


        </div>

Upvotes: 0

Views: 86

Answers (2)

Josh KG
Josh KG

Reputation: 5140

You need a clearfix on the products_Containers. The floated elements inside aren't filling their container element, which the clearfix will take care of. Here's Nicolas Gallagher's lovely clearfix (http://nicolasgallagher.com/micro-clearfix-hack/):

.products_Container:before,
.products_Container:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.products_Container:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.products_Container {
    *zoom: 1;
}

http://jsfiddle.net/EG7v9/2/

Regarding the height difference, the fast and dirty way to fix that is the make the h2 tags the same height no matter what. You can drop a break <br> inside the h2 to split the plan type and the word plan onto two lines:

<h2>Regular <br>Plan</h2>

Just do that for each of the plan h2s.

Upvotes: 1

Walter Roman
Walter Roman

Reputation: 4779

It looks like the background changes are being determined on an on-hover css rule for .products_Container. Try setting the rule for its parent, col-lg-3 col-md-3 col-sm-3 col-xs-12, and give the parent the desired on-hover background color.

Does this achieve what you are attempting to accomplishing?

http://jsfiddle.net/sYJKE/2/embedded/result/

Upvotes: 1

Related Questions