Making an image gallery responsive for mobile?

Vote count:

0

I have been making my new site as responsive as possible. I got my logo to respond to different sice screens by using the "style=max-width:100%" and it works perfectly. however, when I go to add it to my image gallery, it doesn't work. I always have on of the images below the others when they are meant to be next to eachother. Here's the HTML i'm using;

<div align="center"> 
<section class="slide" style="max-width: 100%">         
<strong> <H2> Featured Work </H2> </strong>

        <div class="stage">
        <a href="#" class="element feature1"><a>
        <a href="#" class="element feature2"><a>
        <a href="#" class="element feature3"><a>
        <a href="#" class="element feature4"><a>


    </section>
    </div>

And here is the CSS;

.slide {
  max-width: 2000px;
  width: 100%;
  margin: 70px auto 0;
  opacity: 0;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-animation: 1s appear 1 forwards;
  -moz-animation: 1s appear 1 forwards;
  -o-animation: 1s appear 1 forwards;
  animation: 1s appear 1 forwards;

.element {
  background: green;
  width: 202px;
  -webkit-transform-origin: 50% 50%;
  height: inherit;
  margin: 0 7px 0 0;
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.element.active {
  width: 310px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.element.inactive {
  width: 162px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0.4;
}
.element.feature1 {
  background: url('../images/feature1.jpeg') 45% 0 no-repeat;
  max-width: 100%;
  background-size: cover;
}
.element.feature2 {
  background: url('../images/feature2.jpeg') 45% 0 no-repeat;
  max-width: 100%;
  background-size: cover;
}
.element.feature3 {
  background: url('../images/feature3.jpeg') 45% 0 no-repeat;
  max-width: 100%;
  background-size: cover;
}

.element.feature4 {
  background: url('../images/feature3.jpeg') 45% 0 no-repeat;
  max-width: 100%;
  background-size: cover;
}
.element:last-of-type {
  margin: 0;
}

the website is http://ift.tt/1EPpkMU if you want to take a look in order to help. I'm looking at the site on an iPhone 5, so i'm guessing it'll work on bigger screens due to it being just off slightly on mine.

asked 35 secs ago

Lewis James

11

Making an image gallery responsive for mobile?