CODEWITHSUNDEEP
cssjquery-mobile
user481610
user481610

Reputation: 3270

Possible to move from a jquery mobile Grid B to a Grid A using CSS

I'm using a Grid B as outlined in the documentation. I'm wanting to know if it is possible to use css media queries to change from a Grid B to a Grid A without using javascript/jquery?

Upvotes: 1

Views: 50

Answers (1)

aniskhan001
aniskhan001

Reputation: 8521

According to your needs, I have set the Grid B layout same as Grid A on device-width between 500px and 900px. When the layout enters that zone, "Block A" and "Block B" will take half of the space of total Grid. And Block C will take the entire width of Grid and will go down automatically.

@media screen and (min-width: 500px) and (max-width: 900px) {
    .ui-grid-b.ui-responsive .ui-block-c {
        width: 100%;
    }
    .ui-grid-b.ui-responsive .ui-block-a,
    .ui-grid-b.ui-responsive .ui-block-b {
        width: 50%;
    }
}

FIDDLE here

Hope, you get the idea!

Upvotes: 1

Related Questions