Joansy Joansy - 4 months ago 18
HTML Question

Why does photo gallery not align in mobile version?

My responsive photo gallery looks great, until it gets under 1024px. I have a style sheet for general styles and a separate style sheet for media queries. Why do my images squish together, and not really break apart and align as individual blocks to fit the screen size under 1024px? For example, in the smallest screen it would make sense to just have one image in each column...for a tablet screen two-three images. Currently, when the screen is too small the images overlap on top of each other.

Code I have tried:
Adding this to each media query:

#gallery item {
position:absolute;
float: left;
display: block;
}
#gallery img {
width: 100%;
position:absolute;
}


CSS for responsive photo gallery:

#gallery .content{
border: 1px solid #E6E6E6;
margin: 20px 0 20px 0;
}

.generic{
padding: 60px 0 80px 0;
}

.acontainer {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
display:block;
}

.acontainer:before,
.acontainer:after {
display: table;
content: " ";
}

.acontainer:after {
clear: both;
}

.acontainer:before,
.container:after {
display: table;
content: " ";
}

.acontainer:after {
clear: both;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
content: " ";
}

.row:after {
clear: both;
}

.row:before,
.row:after {
display: table;
content: " ";
}

.row:after {
clear: both;
}

.col-sm-4 {
width: 33.33333333333333%;
float:left;
position: relative;
}

#gallery .content{
border: 1px solid #E6E6E6;
margin: 20px 0 20px 0px;
}

#gallery img {
vertical-align: middle;
}


CSS for media-queries:

@media handheld, only screen and (max-width: 1124px) {
}


/* ------------------------------------------------------------------- --- */
/* Version 1024px
/* ---------------------------------------------------------------------- */
@media handheld, only screen and (max-width: 1024px) {
}

@media handheld, only screen and (max-width: 950px) {
}

/* ---------------------------------------------------------------------- */
/* Mobile Version 767px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
footer h5 {
text-align: center;
}
footer .social{
margin: 30px 0 0 0;
text-align: center;
}
header .navbar-nav > li > a {
background: none repeat scroll 0 0 #EFEFEF;
border-radius: 3px 3px 3px 3px;
color: #666666 !important;
font-size: 12.5px;
line-height: normal;
margin: 0;
padding: 6px 25px;
}
header .navbar-nav {
float: none;
text-align: left;
}
header .navbar-nav > li > a {
text-align: center;
}
.navbar-nav {
padding: 5px 0 0 0;
}
.navbar-nav > li {
display: block;
float: none;
font-size: 15px;
width: 100%;
margin-bottom: 2px;
margin: 0 0 2px;
}
.navbar-collapse {
border: 0 !important;
margin-top: 5px;
}
.slider .clearfix{
padding: 0;
}
.section-title {
text-align: center;
}
.section-title:after,.widget-title:after{
margin: 15px auto 0 auto;
position: inherit;
}
.newsletter {
text-align: center;
}
.newsletter .fields h3 {
font-size: 1.6em;
text-align: center;
}
.newsletter .fields input.btn {
font-size: 1em;
padding: 10px 15px;
}
}

/* ---------------------------------------------------------------------- */
/* Mobile Version 600px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 600px) {
#logo img {
max-width: 190px;
}
}

/* ---------------------------------------------------------------------- */
/* Mobile Version 568px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 568px) {
}

/* ---------------------------------------------------------------------- */
/* Mobile Version 480px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 480px) {
.separator{
padding: 0 60px;
}
.newsletter .fields input.form-control {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 10px;
}
}

/* ---------------------------------------------------------------------- */
/* Mobile Version 420px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 480px) {

.slider-countdown {
background-size: 2380px;
height: 1010px;
}
}
/* ---------------------------------------------------------------------- */
/* Mobile Version 320px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 320px) {

.contform{
padding: 15px 20px 36px 20px;
}
#gallery .item{
padding: 0 30px 0 15px;
}

}

Answer

Your images need a width of 100% and set height to auto.

#gallery img {
     height: auto;
     width: 100%;
     max-width: 300px; /*or what ever the maximum width of the image is */
}

Don't give position:absolute to the images.