Hi there, I have a problem with woocommerce pages not being mobile responsive.

I tried this:

@media only screen and ( max-width: 736px ) {

 

.short-description, .product_meta, body.woocommerce div.product .woocommerce-tabs, body.woocommerce #content div.product .woocommerce-tabs { display: none; }

body.woocommerce .images { float: none !important; width: auto !important; margin-bottom: 40px !important; clear: both !important; }

 

table .product-thumbnail { display: none; }

 

.woocommerce-page #content div.product form.cart .variations { margin-left: 0; }

 

table.cart th, #content table.cart th, table.cart td, #content table.cart td, table.cart tr, #content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { padding: .857em 0.287em; }

.woocommerce .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 100% !important; }

.woocommerce .woocommerce form .form-row, .woocommerce-page form .form-row { width: auto !important; float: none !important; }

 

#order_review .shop_table { margin-left: 0; }

 

}

And it works more or less to large screens like Nexus 6, but in smaller screens like iphone 4 or 5, it won’t fit.

Please help, thank you