Search code examples
htmlcssmobile-websitedisplayphotography

Images are not displaying the same across desktop and mobile platforms

I have a photography website and my goal for the site is to display images down the page one after another. Very very simple. However, the website is not being displayed uniformly across desktop and mobile platforms. The website is perfect so far on the iPhone 5 and S7. It is having issues with image resizing and centering on certain desktops and mobile devices with large css pixel width. I am not sure how to fix this. I will include both the html and css below. Thanks in advance!

Link to website Click Here for website

CSS

@media screen and (max-width: 320px) {
  /* Smaller Devices */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}
@media screen and (min-width: 374px) and (max-width: 376px) {
  /* iPhone 6 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}

@media screen and (min-width: 319px) and (max-width: 321px) {
  /* iPhone 5 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }

}

@media screen and (min-width: 359px) and (max-width: 361px) {
  /* Galaxy S7 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}

@media screen and (min-width: 481px) {
  /* Desktops */
  img {
  width: cover ;
  max-width: 100% ;
  height: cover ;
  }
  .resize {
   width: 1024px; /* 1024 */
   height: 682px; /* 682 */  

  }
  .container {
    margin: 10px;
    width: 1260px;
    height: 1365px;
    line-height: 115px;
    text-align: center;
    border: 0px solid red;
   }


}

body {
   background-color: gainsboro;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>Outdoor Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Grant Birkinbine, Birki, Grant, Photography, Outdoors" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
</head>
<body>

        <img src="colo.jpg">
            <br><br>
            <img src="logo.png">
            <br>
            <img src="Description.png">
            <br><br>


            <div class='container'>
            <a href="The-Great-Outdoors.html"><img class="resize" src="/images/The-Great-Outdoors.jpg"></a>
            <br><br>
            <a href="Howelsen-Hill.html"><img class="resize" src="/images/Howelsen-Hill.jpg"></a>
            <br><br>
            <a href="Wind-And-Water.html"><img class="resize" src="/images/Wind-And-Water.jpg"></a>
            <br><br>
            <a href="In-The-Golden-Light.jpg"><img class="resize" src="/images/In-The-Golden-Light.jpg"></a>
            <br><br>
            <a href="The-Canyon.html"><img class="resize" src="/images/The-Canyon.jpg"></a>
            <br><br>
            </div>








</body>
</html>
Solution

  • Since your .container has a fixed/known width, you can just do an auto-margin for the left and right sides. That would look like this:

    margin: 0 auto; instead of margin: 10px;

    I would also recommend using a height: auto; on your .resize images. That way the height will set itself automatically, keeping your original image ratio intact. This is most obvious when looking at the squished photo of the guy sitting on the rock, as its a tall (ie, portrait) photo.

    Hope that helps!