The Arcive of Official vBulletin Modifications Site.

DemOnstar · #13 11-22-2015, 05:21 AM

Quote:

Originally Posted by Lynne

Can we get a link to view the problem? Images really don't help with CSS issues.

Not live yet. Still on localhost.

Code:

<!DOCTYPE HTML> 
<html lang="en-US"> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  <title>Responsive Tiled Photo Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
  <!-- Enable media queries for old IE -->
[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
[endif]
body {
   margin: 0;
   padding: 0;
   background: #EEE;
   font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
   float: left;
   position: relative;
   width: 22%;
   padding-bottom: 20%;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
}
<!--.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}-->

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 800px) and (min-width : 400px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}

  </style> 
<div class="wrap">
    
  <!-- Define all of the tiles: -->
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg">
      <!--<div class="titleBox">Poster</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
    <!--  <div class="titleBox">An old greenhouse</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
    <!--  <div class="titleBox">Purple wildflowers</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
    <!--  <div class="titleBox">A birdfeeder</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
    <!--  <div class="titleBox">Crocus close-up</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
    <!--  <div class="titleBox">The garden shop</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
    <!--  <div class="titleBox">Spring daffodils</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
    <!--  <div class="titleBox">Iris along the path</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
    <!--  <div class="titleBox">The garden blueprint</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
    <!--  <div class="titleBox">The patio</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
    <!--  <div class="titleBox">Bumble bee collecting nectar</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
    <!--  <div class="titleBox">Winding garden path</div>-->
    </div>
  </div>
  
</div>
<!-- /#wrap -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   // See if this is a touch device
   if ('ontouchstart' in window)
   {
      // Set the correct [touchscreen] body class
      $('body').removeClass('no-touch').addClass('touch');
     
      // Add the touch toggle to show text when tapped
      $('div.boxInner img').click(function(){
         $(this).closest('.boxInner').toggleClass('touchFocus');
      });
   }
});
</script>

Easy enough to replicate. Just drop the code in a HTML module.

Thank you. . .

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04090 seconds Memory Usage 2,897KB Queries Executed 13 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (6)bbcode_code (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (18)post_thanks_box (3)post_thanks_box_bit (18)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (3)post_thanks_postbit (18)post_thanks_postbit_info (18)postbit (3)postbit_attachment (18)postbit_onlinestatus (18)postbit_wrapper (1)showthread_list (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_threadedmode.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids_threaded showthread_threaded_construct_link showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start postbit_attachment post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!