Results 1 to 1 of 1

Thread: help with css media query

  1. #1
    Junior Member
    Join Date
    Dec 2017

    help with css media query

    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 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">
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts