Changing a slideshow to display all images in-line on smaller screens/mobile

Hello, I have a photography portfolio that I set up years ago to show each gallery as a near full screen slideshow. At one point, I figured out how to adjust it for mobile and smaller window sizes, to disable the slideshow and instead show the images all at once in a vertical line.

I ended up disabling that option for a while because I was having some issues with the menu overlapping on specific tablets, but now I want to implement it again and can't figure out where I backed up that code to or how to replicate it! Would anyone be kind enough to tell me how to adjust my code to do this for media queries? As I remember, it wasn't even that hard to do, but I just can't figure it out this time around.

Below I have included 4 sets of code: the general slideshow css, the general site media query css, the full site template css, and the slideshow module css.

SLIDESHOW

#supersized-loader {

position:absolute;

top:65%;

left:50%;

z-index:0;

width:60px;

height:60px;

margin:-30px 0 0 -30px;

text-indent:-999em;

background:url(../../../images/supersized/progress.gif) no-repeat center center;

}

   

#supersized {

    bottom: 0;

    height: 100%;

    left: 285px; /* same distance as left menu width */

    overflow: hidden;

    position: fixed;

     right: 0; /* use instead of width 100% - will go no further than right edge of browser window */

    top: 0;

   /*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/

    z-index: 1;

}



.images {margin: 1px 0 4px 0;}



@media screen and (max-width: 1024px) {

#supersized {

position:fixed;

left:0;

top:0;

overflow:hidden;

z-index: 1;

height:100%;

width: 100%;

}

}



#supersized img {

width:auto;

height:auto;

position:relative;

max-width : none;

display:none;

outline:none;

border:none;

}



/*Quality*/

       

#supersized a {

    background: none repeat scroll 0 0 #111;

    display: block;

    height: 100%;

    left: 285px; /* same distance as left menu width */

    overflow: hidden;

    position: fixed;

    right: 0; /* use instead of width 100% - will go no further than right edge of browser window */

    top: 0;

   /*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/

    z-index: -30;

}



@media screen and (max-width: 1024px) {

#supersized a {

z-index:-30;

position:fixed;

overflow:hidden;

top:0; left:0;

width:100%;

height:100%;

background:#111;

display:block;

}

}



#supersized a.prevslide {

z-index: -20;

}



#supersized a.activeslide {

z-index:-10;

}



#supersized a.image-loading {

background:#111 url(../../../images/supersized/progress.gif) no-repeat center center;

width:100%;

height:100%;

}



#supersized a.prevslide img, #supersized a.activeslide img {

display:inline;

}



/**            Prev / Next slide         **/



#prevslide, #nextslide {

    position:absolute;

    z-index:60;

    overflow: hidden;

    width: 25%;

    height: 100%;

    top: 0;

    opacity: .5;

}



#nextslide {

    left: 75%;

    cursor: url('img/forward.png'), move;

}



#prevslide {

    left: 285px;

    cursor: url('img/back.png'), move;

}



@media screen and (max-width: 1024px) {

#prevslide {

    left: 0;

    cursor: url('img/back.png'), move;

}

   

}

Code (markup):

SITE MEDIA QUERIES

/**  Disable Minimum width of no responsive mode         **/

#column-content {
min-width : 0;
}

.hidden {
display: none;
visibility: hidden;
}

.visible-phone {
display: none !important;
}

.visible-tablet {
display: none !important;
}

.hidden-desktop {
display: none !important;
}

.visible-desktop {
display: block !important;
}



/* Portrait tablet to landscape and desktop */
@media screen and (max-width: 1024px) {


    .hidden-desktop {
    display: block !important;
    }
    .visible-desktop {
    display: none !important ;
    }
    .visible-tablet {
    display: block !important;
    }
    .hidden-tablet {
    display: none !important;
    }

}


/* Phone and little tablet */
@media screen and (max-width: 767px) {


    .hidden-desktop {
    display: block !important;
    }
  .visible-desktop {
    display: none !important;
    }
.visible-tablet {
    display: none !important;
    }
    .hidden-tablet {
    display: block !important;
    }
    .visible-phone {
    display: block !important;
    }
    .hidden-phone {
    display: none !important;
    }
   
}


/**             MAIN MENU
**
**                you can change the value for max-width below ( don't forget to put the same value in "css/ie8-responsive.css" and "css/ie7-responsive.css" )
**/



@media screen and (max-width: 1024px) {
   
    .drop-down {
    position: relative;
    float: none;
    margin:0;
    padding:0;
    width: auto;
    height:auto;
    z-index: 10;
    }
   
    /* Disable position fixed for header */
   
    .website-header {
    height:auto;
    }
   
    .website-header.fixed {
    position:relative;
    top:0;
    }

    .website-top.fixed {
    position:relative;
    top:0;
    }

    .website-top.fixed.with-header {
    top:0px;
    }
   
    .website-middle.fixed {
    margin-top: -150px;
    padding-top:0;
    }

}

@media screen and (max-width: 1024px) {

    .website-footer.footer-home-page {
    position : relative;
    top:0;
    left:0;
    width:auto;
    }
   
    .empty-space-home-page {
    height:100%;
    }

    /**     remove the fixed width of Google map         **/
   
    div[id*="googlemap"] {
    width:auto !important;
    }
   
    /**     Video and Google map         **/
   
    .module_video {
    margin-top: 0;
    padding-bottom: 60px;
    position:relative !important;
    height: 400px !important;
    min-height:400px !important;
    }
   
    .module_google_map {
    margin-top: 0;
    position:relative !important;
    height: 50% !important;
    min-height:50% !important;
    }
   
      /**         Column menu             **/
     
    #column-menu {
    position:relative;
    min-height:0;
    }
   
    .menu-white #column-menu {
    background-color : #8C001A;
    }
   
    .menu-black #column-menu {
    background-color : #000;
    }
       
    #main-column-menu {
    padding: 10px;
    background-color : #8C001A;
    }

    #column-menu, .nav_main, .search-module {
    width:auto;
    }

   
    .logo {
    padding:0 0 0 40px;
    margin: 0;
    float:left;
    }
   
    .logo span {
    line-height:48px;
    }
   
    .logo img {
    max-height : 55px;
    }
   
    h4.customlogo {
    color: #fff;
text-align: left;
width: 300px;
}

p.customlogo {
color: #fff;
text-align: left;
}
   
    #translate {
    position: absolute;
    bottom: -30px;
    right: 35px;
    }
   
    .social-links li a img {
    width:20px;
    }

 
    /**         Column content               **/
   
    #column-content {
    position:relative;
    min-height : 0;
    margin:0;
    }
   
    .module_google_map, .module_video {
    padding-left: 0;
    }
   
    #column-content > .top, #column-content > .bottom, #column-content > .full_width {
    position: relative;
    top:0;
    left:0;
    max-width:100%;
    }
   
    #column-content > .top .all-content {
    margin-bottom:0px;
    }
   
    #column-content #main-column-content .all-content {
    padding: 50px 16px 14px 16px;
    min-height:600px;                 /**        second condition if height > 800px line 390 in this file     **/
    }
   
    .shadow-corner > .bottom {
    min-height:0px;
    background-image : none;
    padding:0;
    }
   
    .shadow-corner > .top {
    min-height:0px;
    background-image : none;
    padding:0;
    top:0;
    }

    /**     CONTENT     **/
   
   
    .left_column, .right-module-position, .top-module-position, .bottom-module-position {
    float:none;
    padding: 12px 0 12px 0;
    margin:0;
    background-image:none;
    border:none;
    width : auto ;
    clear:both;
    }
   
    .left_column > div, .right-module-position > div {
    background-image:none;
    padding:0;
    }
   
   
    .right_column {
    overflow:visible;
    }
   
    .left_column .moduletable > div, .right-module-position .moduletable > div {
    clear:both;
    border:1px solid #ddd;
    margin:0 ;
    background: transparent url(../images/black-03.png) 0 0 repeat;
    }
   
    .white-text .left_column .moduletable > div, .white-text .right-module-position .moduletable > div {   
    border:1px solid #666;
    }
   
    .main_component {
    padding: 0 6px;
    }
   
}

/*        To display the background on all screen if tablet with portrait mode     */
/*        First condition if height < 800px line 266 in this file                 */

@media screen and (max-width: 1024px) {

    #column-content #main-column-content .all-content {
    min-height:900px;
    }
   
}   

/* Phone and little tablet */
@media screen and (max-width: 767px) {

    .logo {
    padding-left :0px;
    }
   
    .top_menu li {
    padding: 4px 2px 0 2px;
    }
   
    .user1, .user2, .user3, .user4, .user5, .user6, .right-module-position {
    float:none;
    padding:12px 0;
    margin:0;
    width : 100% !important;
    clear:both;
    }
   
    .user1, .user2, .user3, .user4, .user5, .user6 {
    margin : 8px 0 0 0;
    }
   
    .top-module-position .border > div, .bottom-module-position .border > div, .user1 .border > div, .user2 .border > div, .user3 .border > div, .user4 .border > div, .user5 .border > div, .user6 .border > div,
    .address .border > div, .translate .border > div, .search .border > div, top_menu .border > div, .bottom_menu .border > div {
    margin-bottom:8px;
    }
   
    .moduletable.shadow > div {
    margin-bottom:0 !important;
    }
   
   
    /**********        Column layouts            *********/

    .one-half, .one-third, .two-third, .one-fourth, .two-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth {
    float: none;
    width:auto;
    margin : 10px 0;
    }
   
}

Code (markup):

GENERAL SITE CSS

/**             RESET            **/

/* normalise les marges et les remplissages  */
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
margin: 0;
padding : 0;
}
/* supprime list-style pour les listes */
ul {
list-style : none;
}
/* supprime les bordures dans les lments fieldset et img */
fieldset, img {
border : 0;
}

.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}

.clearfix:after {
clear: both;
}

article, footer, header, hgroup, nav, section {
display: block;
}

html {
font-size: 100%;
}

/**         Hide the outline     **/

*:hover, *:active, *:focus, input:focus, textarea:focus {
outline:none !important;
}

/**     resize image     **/

img, .scale {
/* Part 1: Set a maxium relative to the parent */
max-width:100%;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height:auto;
vertical-align: middle;
border: 0;
box-sizing: border-box;
}

/*****************************************

        SITE

******************************************/

html, body {
height: 100%;
}

body {
position:relative;
padding: 0;
margin: 0;
}

body.content-black {
background-color : #101010;
color: #f0f0f0;
font-size: 13px;
}

p {
color: #f0f0f0;
font-size: 13.5px;
font-family: Arial;
margin: 0px 0 14px 0;
line-height: 20px;
}

p.homepg {
color: #f0f0f0;
font-size: 13.5px;
font-family: Arial;
width: 60%;
margin-bottom: 0;
}

p.narrow {
color: #f0f0f0;
font-size: 13.5px;
font-family: Arial;
width: 60%;
padding-bottom: 10px;
}

p.specials {
color: #f0f0f0;
font-size: 14px;
font-family: Arial;
margin: 0px 0 27px 0;
line-height: 20px;
}

p.wide {
color: #f0f0f0;
font-size: 13.5px;
font-family: Arial;
width: 70%;
padding-bottom: 10px;
}

.hide-class {
display:none;
}

.zindex1 {
z-index:1;
}
.zindex2 {
z-index:2;
}
.zindex3 {
z-index:3;
}

/********************************************************************************

COLUMN MENU

**********************************************************************************/

#column-menu {
position:fixed;
top:0;
left:0;
min-height:100%;
}

#main-column-menu {
position:relative;
padding: 36px 36px 65px 36px;
z-index:20;
}

.logo {
position:relative;
padding: 0 0 15px 0;
margin: 0 20px 0 -20px;
z-index:10;
}

.logo a, .logo a:hover {
text-decoration:none;
outline:none;
}

p.customlogo {
color: #000;
font-size: 13px;
font-family: Verdana;
padding: 0;
margin: 2px 0 0 30px;
}

h4.customlogo {
color: #000;
font-size: 26px;
padding: 0;
margin-right: -30px;
font-weight: normal;
}

/**  Main menu         **/

.drop-down {
position:relative;
margin-left:-36px;
z-index:10;
margin-top: 25px;
}

.drop-down span.title_menu {
display: none;
}


/**        Search             **/


#column-menu .search-module {
position:relative;
clear:both;
margin : 35px 0 8px -36px;
}

/**            Sidebar footer             **/

.sidebar-footer {
position : absolute;
bottom:0;
left:0;
padding: 0 32px 24px 36px ;
z-index:10;
}

/**            social icons            **/

.social-links {
clear:both;
list-style:none;
padding:0;
margin: 0 0 0 28px;
}

.social-links li {
display:inline-block;
width:23px;
padding-right:3px;
list-style:none;
}

.social-links li a img {
width:23px;
opacity : 0.5 ;
border:none;
}

.social-links li a:hover img {
opacity : 1 ;
}

/********************************************************************************

            CONTENT BOX

**********************************************************************************/

#column-content {
position:relative;
min-height:100%;
}

.no_min_height {
min-height:0 !important ;
}

#column-content > .top {
position: absolute;
top:30px;
right:30px;
/* Part 1: Set a maxium relative to the parent */
max-width:90%;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height:auto;
vertical-align: middle;
border: 0;
box-sizing: border-box;
}

#column-content > .top .all-content {
margin-bottom:30px;
}

#column-content > .bottom {
position: absolute;
bottom:30px;
right:30px;
/* Part 1: Set a maxium relative to the parent */
max-width:90%;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height:auto;
vertical-align: middle;
border: 0;
box-sizing: border-box;
}

#column-content > .full_width {
position:relative;
width:100% !important;
}

#column-content > .top .all-content, #column-content > .bottom .all-content {
padding:20px;
}

#column-content > .full_width .all-content {
padding: 30px 40px 30px 40px ;
}

.white0, .white0 .drop-down li ul {
background-color: #fff ;
}
.white1, .white1 .drop-down li ul {
background: transparent url(../images/white-93.png) 0 0 repeat;
}
.white2, .white2 .drop-down li ul {
background: transparent url(../images/white-88.png) 0 0 repeat;
}
.white3, .white3 .drop-down li ul {
background: transparent url(../images/white-80.png) 0 0 repeat;
}
.white4, .white4 .drop-down li ul {
background: transparent url(../images/white-70.png) 0 0 repeat;
}
.white5, .white5 .drop-down li ul {
background: transparent url(../images/white-55.png) 0 0 repeat;
}
.white6, .white6 .drop-down li ul {
background: transparent url(../images/white-40.png) 0 0 repeat;
}
.white7, .white7 .drop-down li ul {
background: transparent url(../images/white-25.png) 0 0 repeat;
}
.white8, .white8 .drop-down li ul {
background: transparent url(../images/white-16.png) 0 0 repeat;
}
.white9, .white9 .drop-down li ul {
background: transparent url(../images/white-08.png) 0 0 repeat;
}

.white10, .black10, .white10 .drop-down li ul, .black10 .drop-down li ul {
background-color:transparent;
}

/**         Content         **/

.content {
position:relative;
overflow:hidden;
padding: 0;
z-index:1;
}

.main_component {
position:relative;
overflow:hidden;
z-index:1;
}

/**    Header Class    **/

h1 {
display: block;
font-size: 26px;
margin: -15px 0 14px 0;
padding:10px 0 5px 0;
letter-spacing:0px;
color: #7fbdb9;
font-family: 'Open Sans';
font-weight: normal;
line-height:1.4;
}

h3 {
padding:10px 0 5px 0;
font-size: 14px;
font-weight:bold;
color: #7fbdb9;
font-family: 'Open Sans';
line-height:1.4;
}

/********************************************************************************

        Footer (only for mobiles)

**********************************************************************************/

.website-footer {
position:relative;
padding: 8px 0 16px 0;
}

/**            Social links & address    **/

.website-footer .social-links {
text-align:center;
}

/********************************************************************************

            OTHERS

**********************************************************************************/

hr {
border:none;
border-bottom: 1px solid #999;
border-color : #444;
margin: 18px 0;
}

img.floatright {
float: right;
margin: 0;
padding-left: 10px;
padding-right: 2px;
padding-top: 4px;
}

img.floatleft {
float: left;
margin: 0;
padding: 2px 15px 20px 0;
}

img.floatmid {
vertical-align: middle;
margin: 4px;
}

img.rates {
padding-bottom: 40px;
}

a, a:visited {
color: #fef7b8;
text-decoration: none;
}

a:hover {
color: #7fbdb9;
text-decoration: none;
}


.one-half {
float:left;
margin: 5px 10px 5px 0;
width:45%;
}

.last {
margin-right: 0 !important;
width:30%;
}

.last + * {
clear:both;
}

.one-third {
float:left;
margin: 2px 12px 5px 0;
width:19%;
}

.two-third {
margin-top: 7px;
width:80%;
min-height: 140px;
}

Code (markup):

SLIDESHOW MODULE CSS

.tab-content .row-fluid .span0, .tab-content .row-fluid .span3, .tab-content .row-fluid .span6, .tab-content .row-fluid .span9, .tab-content .row-fluid .span12 {
width:100%;
}

.tab-content .form-vertical {
background: #f0f0f0;
border:2px solid #ddd;
margin-top:40px;
padding:20px;
}

.info-labels + div {
background: none repeat scroll 0 0 #EEEEEE;
color: #000000;
font-size: 110%;
font-style: italic;
font-weight: normal;
margin: 15px 0 30px;
padding: 15px 10px 10px 20px;
}

Code (markup):

 

I'd have to see the page live... since CSS without the HTML it's applied to is gibberish -- but your code throws up SO many warning flags. Clearfix like it's still 2003, absolute and fixed positioning likely making it far from mobile much less desktop friendly, endless pointless vague presentational classes, forcing style with !important...

Lemme guess, you used one of those sleazy predatory ignorant "frameworks" to build the site, didn't you? Well there's your problem.

Moment I see classes like "tab-content" or "row-fluid" it's pretty much time to toss the entire disaster in the trash and start over.

But then "full screen slideshow" IMHO == epic /FAIL/ at web development, given how images big enough for a full screen are typically too big to have any business on a website in the first place. EVEN for a photography portfolio. Just say no to goofy animated BS that is more likely to piss off visitors than impress them.

 

Wow...okay, I respect your strong feelings on the matter but I was asking for some basic help, not an angry criticism of my entire site. The site is quite old, yes. It uses Joomla and a template that I bought years ago and tweaked a lot myself, so I'm sure there are many outdated things in there. But the fact is that it works just fine, running fast and smoothly on all browsers and on many mobile devices as well. It's a very simplistic site that does exactly what I need it to do, and like I said, I was able to get the responsive option for media queries (changing the slideshow to all pictures displayed vertically on mobile devices and smaller windows sizes) without much work before. It was a pretty simple bit of media query code that just changed the way the images were diplayed at certain window sizes. It's just been a while and I've completely forgotten how it was done.

 

I SERIOUSLY question whether that statement is even CLOSE to being true, but without being able to visit the site myself I have no way to check your "fact."

 

I'm not sure what there is to question. The site works as it should on every browser that I've carefully tested it on as well as on numerous mobile devices. And even if it didn't, I don't know why you guys are being so unfriendly. I'm not asking for feedback on the quality of the coding of the overall site. Even if you feel that the overall code is a mess, it's completely irrelevant to what I'm asking. If I ever have the time to redo it or the money to hire someone to do it, then I'm sure I will. But until then, it does what I need it to do and all I wanted was some very basic help with setting up a slideshow to display as a vertical block of images. But since it seems you would rather be snobby and rude about it, never mind. Clearly I'm in the wrong place for help. I'll try to figure it out myself with a few weeks of trial and error. Really appreciate your support; good to know there's such a nice, welcoming forum for people to go when they have a question.

 

Then show the markup. CSS without the HTML is pretty much meaningless. We have NO idea what your structure is, how the CSS is targeting that structure, or any other meaningful information to help you.

... and if the code you presented is being taken apart, it's because 1) we're guessing, 2) from what is presented it likely does NOT work well across all browsers and mobile as you claim -- possibly telling large swaths of users to sod off, and 3) it has telltales that it might in fact be easier to rewrite from scratch than it is to try and "fix" to do what you want.

That last part might seem counterintuitive, but often outdated or poor code is such a wreck to try and work with, it's FASTER to throw it in the bin and start over. That said we cannot actually tell you if that is the case without the HTML, and probably some sample images so we can see what you already have. Otherwise anything anyone tells you is a WILD GUESS.

CSS without HTML === "This is why we can't help you!" -- and a live demo of what you have would help far, far more.

 

Now you change your tune. Based on your next post, you lied on your previous post because it does NOT necessarily work in ALL BROWSERS, ONLY those that you have TESTED.

You want help, but you are UNWILLING to give us enough information to help you and then you complain because we are GUESSING. NEVER WORKS.