CSS question and mobile side view error

hello,

i added this code:

@media (max-width: 768px) {
#content .product-item {
margin-bottom: 50px;
overflow: hidden;
width: 46%;
float: left;
margin: 2%;
height: 280px;
}
}

to make the products display 2 items instead of 1 in mobile view. it worked but when i turn the phone side ways, it shows the pictures big.

would anyone know what i can change to fix the mobile side view?

http://www.peonypearls.com/shop

thank you in advance.