CODEWITHSUNDEEP
csswordpress
user2502658
user2502658

Reputation: 115

Columns Incorrectly displaying on mobile

I have two images with relevant paragraphs underneath them, which show perfectly on pc: ViewSiteHere - however the same page on mobile moves the images underneath each other, making the incorrect info display thereunder.

I have tried making each image only have a width of 49% but that just makes the images smaller and not next to one another

MobileTest

Thank you

Upvotes: 0

Views: 38

Answers (2)

Blazed
Blazed

Reputation: 309

The best approach to the images, both for accessibility that for responsive, would put one under the other. However, if you want you can do that use max-width/max-height and float and at hover the image enlarge. You can use something similar to this:

body, html {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 800px) {
  img {
    max-width: 50%;
    max-height: 50%;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  
  img:first-child {
    float: left;
  }
  
  img:hover {
    max-width: 100%;
    max-height: 100%;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TEST IMG</title>
</head>
<body>
<div class="wrap">
  <img src="http://www.pepafrica.org/img/1.jpg" alt="">
  <img src="http://www.pepafrica.org/img/1.jpg" alt="">
</div>
</body>
</html>

http://output.jsbin.com/fodehu

Upvotes: 1

Adam Scot
Adam Scot

Reputation: 1409

According to the flow of the document, the current order of content is:

  1. Image 1
  2. Image 2
  3. Description of image 1
  4. Description of image 2

What you need to do is put "Image-1" and "description of image-1" in a <div> element. This will maintain the relationship between the text and image on mobile

Upvotes: 1

Related Questions