help with css media query

[jamiey]

I am pretty new to responsive development and I am working on a site and having some trouble with the smaller screen sizes. I made a div and have added a 1px solid border around the image and content. When I view it on my phone, I see the image is smaller than the box and when I turn my phone to a landscape, it gets much worse. I tried a max width size on the box containing the content which has fixed it in the browser, but on my phone, it still looks bad. I tried a media query to set the width of the box but I am not sure what to use in that query to get the box to size correctly. I also tried to center the box in the window so that it would look a little better. I am using boostrap 4 beta.

you can view a pic here https://www.dropbox.com/s/hpt2ose688...51.11.png?dl=0 if it works. The grey outline of the pic should only be as wide as the thumbnail in the picture

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

.property {
margin: 0 auto;
max-width: 270px;
}
}

my columns look like this
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
</div>