Is it possible to change html after using media query?

Question

i'll try to explain this as detailed as possible. I have a responsive website that responds to different resolution. On one particular page, on full screen there will be 8 thumbnails on the left side, when clicked on any of the thumbnails the right side will show the full image of it.

I uses media query to fit every img to 100% on a mobile screen resolution at 320px width. Now every thumbnails and the full image will be the same size, and it will be a long scrolling web on mobile layout. What i want is during media query of mobile device, i want to be able to change the html so that i will overlay all the image as one image instead, and upon click it will just switch to the next image. Not sure how i can achieve that. Any tips?

my CSS, i'm using a responsive framework from skeleton.

/* #Base 960 Grid

================================================== */

/* My own addon
================================================== */
.header-wrap, header                        { height:200px; }
.container .header_text                     { max-height:40px; }
.accordionContent                           { height:510px; }

/* skeleton defaults
================================================== */   
.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                                        { margin-bottom: 20px; }

/* Nested Column Classes */
.column.alpha, .columns.alpha               { margin-left: 0; }
.column.omega, .columns.omega               { margin-right: 0; }

/* Base Grid */
.container .sixteen.columns.full-width      { width:960px; }
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }

/* Offsets */
.container .offset-by-one                   { padding-left: 60px;  }
.container .offset-by-two                   { padding-left: 120px; }
.container .offset-by-three                 { padding-left: 180px; }
.container .offset-by-four                  { padding-left: 240px; }
.container .offset-by-five                  { padding-left: 300px; }
.container .offset-by-six                   { padding-left: 360px; }
.container .offset-by-seven                 { padding-left: 420px; }
.container .offset-by-eight                 { padding-left: 480px; }
.container .offset-by-nine                  { padding-left: 540px; }
.container .offset-by-ten                   { padding-left: 600px; }
.container .offset-by-eleven                { padding-left: 660px; }
.container .offset-by-twelve                { padding-left: 720px; }
.container .offset-by-thirteen              { padding-left: 780px; }
.container .offset-by-fourteen              { padding-left: 840px; }
.container .offset-by-fifteen               { padding-left: 900px; }

/* #Tablet (Portrait) ================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

    /* My own addon
    ================================================== */
    .header-wrap, header                        { height:350px; }
    .header-wrap div.nine.columns.logo          { width: 358px; }
    .header-wrap div.three.columns.header-tab1,
    .header-wrap div.four.columns.header-tab2   { width:175px; }
    .container div.six.columns.empty            { width:150px; }        
    .header-wrap .logo { width:364px; }
    .header-wrap div.six.columns.header-text    { width: 386px;}
    .container p.header_text,
    .container p.header_text2                   { font-size:50px; }
    .header_nav ul li                           { margin:0; margin-top:10px; width:100%;}       

    .accordionContent                           { height:410px; }


    /* skeleton defaults
    ================================================== */
    .container .sixteen.columns.full-width      { width:768px; }
    .container                                  { width: 768px; }
    .container .column,
    .container .columns                         { margin-left: 10px; margin-right: 10px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }
    .container .one.column,
    .container .one.columns                     { width: 28px; }
    .container .two.columns                     { width: 76px; }
    .container .three.columns                   { width: 124px; }
    .container .four.columns                    { width: 172px; }
    .container .five.columns                    { width: 220px; }
    .container .six.columns                     { width: 268px; }
    .container .seven.columns                   { width: 316px; }
    .container .eight.columns                   { width: 364px; }
    .container .nine.columns                    { width: 412px; }
    .container .ten.columns                     { width: 460px; }
    .container .eleven.columns                  { width: 508px; }
    .container .twelve.columns                  { width: 556px; }
    .container .thirteen.columns                { width: 604px; }
    .container .fourteen.columns                { width: 652px; }
    .container .fifteen.columns                 { width: 700px; }
    .container .sixteen.columns                 { width: 748px; }

    .container .one-third.column                { width: 236px; }
    .container .two-thirds.column               { width: 492px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 48px; }
    .container .offset-by-two                   { padding-left: 96px; }
    .container .offset-by-three                 { padding-left: 144px; }
    .container .offset-by-four                  { padding-left: 192px; }
    .container .offset-by-five                  { padding-left: 240px; }
    .container .offset-by-six                   { padding-left: 288px; }
    .container .offset-by-seven                 { padding-left: 336px; }
    .container .offset-by-eight                 { padding-left: 384px; }
    .container .offset-by-nine                  { padding-left: 432px; }
    .container .offset-by-ten                   { padding-left: 480px; }
    .container .offset-by-eleven                { padding-left: 528px; }
    .container .offset-by-twelve                { padding-left: 576px; }
    .container .offset-by-thirteen              { padding-left: 624px; }
    .container .offset-by-fourteen              { padding-left: 672px; }
    .container .offset-by-fifteen               { padding-left: 720px; }
}

/* #Mobile (Portrait) ================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) { 
    /* My own addon
    ================================================== */
    .header-wrap, header                        { height:670px; }
    .header-wrap div.nine.columns.logo img      { width: 100%; }
    .header-wrap div.three.columns.header-tab1 img,
    .header-wrap div.four.columns.header-tab2 img   { width:100%; }
    div.six.columns.empty                       { margin-left: 30px; width:0px; height:0px; }
    .container p.header_text,
    .container p.header_text2                   { font-size:50px; margin-top:0px; }
    .header_nav ul li                           { margin:0; margin-top:10px; width:100%; }
    .container .four.columns.banner img         { width: 100%; }
    .footer-wrap .container div.five.columns    { width:auto; }
    .footer-wrap .container div.eleven.columns  { width:100%; }
    .accordionContent                           { height:2910px; }
    .gap                                        { margin-bottom:10px !important;}

    /* skeleton defaults
    ================================================== */
    .container .sixteen.columns.full-width      { width:300px; }
    .container { width: 300px; }
    .container .columns,
    .container .column { margin: 0; }
    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column  { width: 300px; }

    /* Offsets */
    .container .offset-by-one,
    .container .offset-by-two,
    .container .offset-by-three,
    .container .offset-by-four,
    .container .offset-by-five,
    .container .offset-by-six,
    .container .offset-by-seven,
    .container .offset-by-eight,
    .container .offset-by-nine,
    .container .offset-by-ten,
    .container .offset-by-eleven,
    .container .offset-by-twelve,
    .container .offset-by-thirteen,
    .container .offset-by-fourteen,
    .container .offset-by-fifteen { padding-left: 0; }

}

/* #Mobile (Landscape) ================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* My own addon
    ================================================== */
    .header-wrap, header                        { height:770px; }               
    div.six.columns.empty                       { margin-left: 30px; width:0px; height:0px; }
    .container p.header_text,
    .container p.header_text2                   { font-size:50px; margin-top:20px; }
    div.four.columns.header-text1               { width:180px; }
    div.six.columns.header-text2                { width:240px; }        
    .footer-wrap .container div.eleven.columns  { width:240px; margin-left: 20px; }
    .accordionContent                           { height:4010px; }



    /* skeleton defaults
    ================================================== */
    .container .sixteen.columns.full-width      { width:420px; }
    .container { width: 420px; }
    .container .columns,
    .container .column { margin: 0; }
    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column { width: 420px; }
}

/* #Clearing ================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

MY html for the thumbnails and image

    <div class="container content">
    <div class="sixteen columns full-width alpha omega accordionDiv">
        <div id='accordion'>
            <ul>               
                <li class='has-sub active'><a href='#'><span>Click thumbnails to enlarge</span></a>
                    <ul>
                        <li class="accordionContent">
                            <div id="sectionTwo_thumbnail" class="sectionTwo four columns">
                                <img id="portfolio1" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio1.jpg">
                                <img id="portfolio2" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio3" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio4" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio5" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio6" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio7" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio8" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio9" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio10" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio11" class="two columns alpha" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                                <img id="portfolio12" class="two columns omega" src="page_a3da/sectionTwo_a3da_portfolio2.jpg">
                            </div>

                            <div id="sectionTwo_mainPic" class="twelve columns">
                                <img class="twelve columns" src="page_a3da/sectionTwo_a3da_portfolio_highlight1.jpg">
                                <img class="twelve columns" src="page_a3da/sectionTwo_a3da_portfolio_highlight2.jpg">
                            </div>
                        </li>
                    </ul>
               </li>
            </ul>
        </div>                   
    </div>
</div> 

the above html code i had 2 main image overlap each other, so when the thumbnail is click it will display the corresponding main image. I now want all the thumbnails to dissapear on media query 320px, and have only 1 image frame where when i click on it the next image will show out but i don't know how to do that with media query as i thought it is only for changing position since it is css..

Answer 1

"Is it possible to change html after using media query?" ----sure. as long as the css or script runs later than the html created, it will change.

as per your requirments "when clicked on any of the thumbnails the right side will show the full image of it."

I think you can use some image gallery animation framework and enable its responsive features then custom the css according to your requirements using media queries to achieve the effects you expected.

Answer 2

as far as making the thumbnails disappear in screens under 320px wide, just add display:none in that section of media query to the thumbnails. as far as moving the pics to the next on click/touch, there you are going to need javascript. some kind of slider plugin perhaps.

or instead of plugin, you can overlay each image on top of each other using css z-index and using just plain javascript, you can give onclick change the z-index to the bottom of the image pile... kinda sorta like a rudimentary slider of sorts.

this will save you from using a plugin and all its dependancies.

hope this helps