Images are not displaying the same across desktop and mobile platforms

Question

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>

Take a look at [responsive images](http://getbootstrap.com/css/#images). - Since you're already using Bootstrap anyway. — dokgu, Nov 30 '16 at 18:57

score 0 · Accepted Answer · answered Nov 30 '16 at 19:01

0

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!

answered Nov 30 '16 at 19:01

cdwyer

589
6
22

As an aside, if you're just getting started with HTML—and particularly for a simple project like this—you should consider using Bootstrap. Their CSS grid will handle a lot of the media queries and whatnot. http://getbootstrap.com/css/#grid – cdwyer Nov 30 '16 at 19:03

score 0 · Answer 2 · answered Nov 30 '16 at 19:15

0

I recommend starting with improving your markup:

wrapping your images in block elements to prevent inline space
using the figure tag where appropriate
adding the alt attribute to your images for accessibility

answered Nov 30 '16 at 19:15

ryanve

50,076
30
102
137

Images are not displaying the same across desktop and mobile platforms

2 Answers2