If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Follow us on Twitter
Results 1 to 1 of 1
  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
All times are GMT. The time now is 12:44 AM.
Powered by vBulletin® Version 4.2.0
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: