I have an Aurelia app where I want to have an infinite scroll in one part of a dashboard application. So, my scrolling area is only on one part of the screen. I have it scrolling but the scroll is jerky every three or four lines and I am trying to figure out how to tune the ui virtualization plugin or my use of it to not have jerky scrolling.
I have tried making the container larger and smaller. I have not tried making it a table. I am using flex-box for the items in the infinite scroll, and I have five items, instead of one like the demo application, across, in columns, inside the repeatable div like this:
<div class="" style="overflow: scroll;
height: 1000px">
<div class=" " virtual-repeat.for="row of rows"
style="display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
height:300px;">
<div class="card" style="height:300px;">
<img src.bind="row.item1.image" ref="image" />
<div class="card-section">
<h3>First column</h3>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item2.image" ref="image" />
<div class="card-section">
<h3>second column</h3>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item3.image" ref="image" />
<div class="card-section">
<h3>third column</h3>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item4.image" ref="image" />
<div class="card-section">
<p>4th column</p>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item5.image" ref="image" />
<div class="card-section">
<p>5th column</p>
</div>
</div>
</div>
</div>
Related
I have an angular web page like this
this is the picture
I have no problem in web version but I want to display in another way in mobile version like title picture and text
this is an example of my code
<div class="our-company-history section-space--ptb_100">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="faq-custom-col">
<div class="section-title-wrap">
<h3 class="heading"><span class="text-color-primary">Développement Logiciel</span></h3>
<h6 class="text" [innerHtml]="cont.developement"></h6>
<p [innerHtml]="cont.developement_suite" class="text mt-30"></p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="rv-video-section">
<div class="ht-banner-01 ">
<img class="img-fluid border-radus-5 animation_images one wow fadeInDown" src="assets/images/banners/logiciel4.png" alt="">
</div>
<div class="ht-banner-02">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images two wow fadeInDown" src="assets/images/banners/logiciel3.png" alt="">
</div>
<div class="main-video-box video-popup">
<a class="video-link mt-30">
<div class="single-popup-wrap">
<img class="img-fluid border-radus-5" src="assets/images/banners/logicielb.png" alt="">
<div class="ht-popup-video video-button">
</div>
</div>
</a>
</div>
<div class="ht-banner-03">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images three wow fadeInDown" src="assets/images/banners/logiciel1.png" alt="">
</div>
<div class="ht-banner-04">
<img width="190" height="190" class="img-fluid border-radus-5 animation_images four wow fadeInDown" src="assets/images/banners/logiciel2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I looked a lot for a method to display mode in another way in mobile version I need some help and thank you
With the given problem, I think its better if you use media queries to hide/show elements in browser. Further you may need to add few lines of html to change layout.
Or you can follow bootstrap grid layout / flex box to give it basic responsiveness.
there are a lot of references out there to solve this issue.
I am making the footer in bootstrap which have links like Features, About, FQS, Contact us and logo-image(Hide for copyrights).
For large screens, the position of elements like links and logo-image are fine.
But for medium screens "links" started to display vertically, rather than displaying horizontally and logo-image moves downwards the link, as you can observe in picture provided.
Here i want 2 changes.
1)The links must display horizontally even at medium or small screen.
2) As soon as it reaches to the break-point, the elements should swap the position.(The logo-image should display at link's location and vice versa).
Code:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div>
</div><!--End Row-->
</div><!--End container-->
</div><!--End container-fluid-->
I would modify the css outside of bootstrap by giving the logo a specific class. Bootstrap is great framework, adding the custom CSS will let you leverage that framework and still add the manipulations you need. Hope that this helps.
Here is the working codepen.
http://codepen.io/anon/pen/oxJzQd?editors=1100
HTML Changes
<div class="col-md-8 logo">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
CSS
.logo {
text-align:center;
}
/*optional stuffs */
.logo img{ width:100%; height:auto;}
#media only screen and (min-width : 768px) {
.logo { text-align:right;}
/*optional stuffs */
.logo img {width:initial; height:initial;}
}
This is because you are saying at MEDIUM screen size have this column layout:
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
col-md-*
Only effect medium screen sizes and above. If you want to target every device you would use col-xs-*
Like so...
<div class="col-xs-12">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-xs-8 col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
I believe this is the issue you are talking about. But it does not help since you provide no JSFiddle link for people to help you easily. I would recommend you attach JSFiddle link in future reference.
Try to remove div with form-group class as you have your col stacked.
Try this:
<div class="container">
<div class="row">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
<div class="row">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
<br/>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
<br/>
Contact us
</div>
<div class="col-xs-8">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
<div class="row">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div><!--End container-fluid-->
Regards.
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.
I have the divs with different heights in my div structure. Each div contains <p> tags and <h2> tags. These are drawn using the data retrieved from the server side. I want to stack them to the left of the screen. the below example shows how it's displayed now.
What I want is to position all the divs left aligned irrelevant of the height and width of it. Sort of a left aligned stack.
The following is the div structure of the above image.
<div class="specials-container">
<div class="clear"></div>
<article class="facility-group">
<h2>Accomodation</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>2 Luxurious Rooms With Attached Toilets</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Armchair & built in window seat.</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>55 metres sq.</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Health</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Double Vanity, Illuminated Makeup/Shaving Mirror</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Air Conditioned</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Connectivity</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>High Speed Internet Access</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>LCD Screen Television With Cable Channels</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Special</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>King Size Balinese Four Poster Double Bed or Large</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Family Suite consists of a Double Garden Suite.</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Common</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Shared Bathroom</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Complimentary Toiletries</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Express Check In</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Free News Paper</p>
</div>
<div class="clear"></div>
</article>
<div class="clear"></div>
</div>
And this is the CSS that I've applied. I've only added the parent CSS and the container CSS. Omitted the images and header CSS. If needed I'll post them too.
.specials-container {
width: 100%;
position: relative;
}
article {
padding: 10px 6px;
text-align: left;
border: 1px solid #ccc;
border-radius: 5px;
float: left;
position: relative;
margin: 10px;
}
I tired the display:flex and other display commands. But those are not supported by older IE versions like IE 7.
here is the way I want to stack the DIVs.
I found a solution for this matter using the clear command. If I use a clear-fix for every fourth element which I draw, the elements get stacked to the left.
in this case, I've to add clear:left to each fourth element I draw.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm trying to get the slider on the following page to display the freakin' images on the slider! http://www.ultimatebowhuntingtv.com/index.php/partners/ You can see in chrome developer tools under 'resources' that the images are being called from the correct location, so I just can't see why I can't see the images. I am using the AnythingSlider: http://css-tricks.com/anythingslider-jquery-plugin/. And the code is below. Slider html below the
<?php
/*
Template Name: Partners
*/
?>
<?php get_header(); ?>
</div>
</div>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/lightbox.js"></script>
<link href="/js/lightbox.css" rel="stylesheet" />
<!-- Anything Slider -->
<link rel="stylesheet" href="/wp-content/themes/onplay/css/anythingslider.css">
<script src="/wp-content/themes/onplay/js/jquery.anythingslider.js"></script>
<!-- Define slider dimensions here -->
<style>
#slider { width: 700px; height: 390px; }
</style>
<!-- AnythingSlider initialization -->
<script>
// DOM Ready
var J=jQuery.noConflict();
J(function(){
J('#slider').anythingSlider();
});
</script>
<div id="main">
<div class="wrap-special">
<div class="content full-width-special">
<div class="post">
<h1 class="title-special" style="display: none;"><?php the_title(); ?></h1>
<?php wp_reset_query(); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php edit_post_link( __('Edit', 'wpzoom'), ' ', ''); ?>
<div class="entry " style="color: #fff;">
<img src="/images/bkg-title-partners.jpg" /><br />
<!--INSERT SLIDER HERE-->
<ul id="slider">
<li><img src="/images/slider/slider-1.jpg" alt=""/></li>
<li><img src="/images/slider/slider-2.jpg" alt=""/></li>
<li><img src="/images/slider/slider-3.jpg" alt=""/></li>
<li><img src="/images/slider/slider-4.jpg" alt=""/></li>
</ul>
<div class="clear"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-scoutlook.jpg" alt="ScoutLook Weather" />
<div class="text">
<div class="partner-title">ScoutLook</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Scoutlook is the most advanced weather resource available period! You have instant access to precise weather details, solunar data, game feeding times, wind direction helping you with Scent Cone, Deer Logs and much more. We rely on Scoutlook in our preparation and while we are in the field.</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-scoutlook-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-scoutlook-thumb-2.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-nufletch.jpg" alt="NuFletch Archery" />
<div class="text">
<div class="partner-title">NuFletch Archery</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text"></div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-nufletch-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-pse.jpg" alt="PSE Archery" />
<div class="text">
<div class="partner-title">PSE Archery</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">We have used PSE Bows for the past five years and love them. Why?...It is because they are the fastest bows on the market and have become some of the most accurate bows a bowhunter can shoot. There are a lot of bows to choose from and we have shoot nearly all of them over the years. We are shooting the new PSE Dream Season DNA bow this year and new Smoke Crossbow. The DNA is the fastest, quietest, and most accurate bow I have put in my hands to date...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-pse-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-muddy-bloodsport.jpg" alt="Muddy Bloodsport" />
<div class="text">
<div class="partner-title">Muddy Bloodsport</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Bloodsport arrows use Fly Straight Technology that allows them to be some of the most accurate arrows on the market. Additionally, the Carbon technology used ensures that they are the most durable arrow on the market. We have to know our arrow is going to be accurate and be durable so we can use them time and time again...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-bloodsport-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-big-green-targets.jpg" alt="Big Green Targets" />
<div class="text">
<div class="partner-title">Big Green Targets</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Big Green Targets are the only target we use when we practice in the backyard, range or when we arrive at our hunting destination. They are made from 100% recycle material, heat bonded layered target and weather proof. This leads to a durable target that will last for long time withstanding thousands of shots. They have SUPER EASY Arrow Removal and are made here in the USA...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-BGT-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-BGT-thumb-2.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-BGT-thumb-3.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-redneck-blinds.jpg" alt="Redneck Blinds" />
<div class="text">
<div class="partner-title">Redneck Blinds</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Redneck Blinds are a new addition to our hunting tools. When you step into a Red Neck Blind you will see why they are becoming a market leader. The 360 degree shooting ability, carpet floors, adjustable windows and generous room for several hunters or camera man. We also love them because they help control our scent!</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-RNB-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-spypoint.jpg" alt="Spypoint Game Cameras" />
<div class="text">
<div class="partner-title">Spypoint Game Cameras</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Spypoint is becoming the market leader when it comes to producing the most innovative game cameras on the market. We rely on and use the LIVE 3G, Tiny W2 and new Tiny W3 wireless cameras to help us monitor our deer herd year round. Spypoint also produces high quality security cameras such as the BF-8 with BLACK LED Technology.</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-spypoint-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-2.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-3.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-4.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-spypoint-thumb-5.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-swhacker.jpg" alt="Swhacker Broadhead" />
<div class="text">
<div class="partner-title">Swhacker Broadheads</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">When it comes to broadheads Swhacker has become our broadhead of choice. We have 100% confidence in these broadheads for both our bows and crossbows. They Fly like a field point and have a huge cutting diameter. Broadside shots, angled shots or less than perfect shots the Swhacker gets the job done. I shot my Turkey Grand Slam with the Swhacker...</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-swhacker-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-yeti.jpg" alt="Yeti Coolers" />
<div class="text">
<div class="partner-title">Yeti Coolers</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">We started using Yeti coolers this year as we Bowfish, Spearfish, and everyday use. We love how durable they are and how well they keep our food and game cool. Especially, on those long days on the water or traveling back from hunting trip. We are using the Series 35 and 65 this year and love them!</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-yeti-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-always-lethal.jpg" alt="Under Armor Always Lethal" />
<div class="text">
<div class="partner-title">Under Armor Always Lethal</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">There is nothing worse than being too hot, too cold or uncomfortable in the woods. Minimizing your movement is key to our success not matter if we are turkey hunting or bowhunting big game. Under Armour clothing keeps us cool and comfortable in the Spring and Summer. During the Fall and Winter we can stay in the woods longer because of the layering technology. We are also using the new Scent Control Clothing along with HAW Rubber Boots that are extremely comfortable.</div>
<!--<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-lethal-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>-->
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-mossy-oak.jpg" alt="Mossy Oak" />
<div class="text">
<div class="partner-title">Mossy Oak</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Mossy Oak Infinity keeps us concealed during the fall no matter where we are bowhunting. The level of depth, detail and definition is awesome with this pattern. Our goal is the ensure we cover every base we can to put the advantage in our corner no matter if we are turkey hunting or bowhunting big game. Mossy Oak Infinity in the fall gives us that edge..In the Spring we rely on Mossy Oak Obsession based on lighter colors and green elements incorporated into the pattern.</div>
<!--<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-mossy-thumb-1.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>-->
</div>
</div>
</div><!--close partner box-->
<div id="partner-box">
<div id="Pwrapper">
<img class="hover" src="/images/partners/partner-300x250-muddy.jpg" alt="Muddy" />
<div class="text">
<div class="partner-title">Muddy</div>
<div class="partner-website">Visit their website</div>
<div class="partner-text">Muddy Tree Stands in our opinion are some of the most versatile stands on the market. We love the adjustablity of their lock on stands that allow you to set up in a less than straight tree and still be comfortable for all day sit. Additionally, we use their safeguard harness for ourselves and our boys who hunt with us. I have 100% confidence in these safety harnesses to keep me and my children safe..</div>
<div class="partner-gTitle">Gallery <span style="color:#aeaeae; font-weight: normal;">- Click Image To Expand</span></div>
<div class="partner-gallery">
<img src="/images/partners/gallery-muddy-thumb-1.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-2.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-3.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-4.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-5.jpg" class="partner-gallery-thumb" />
<img src="/images/partners/gallery-muddy-thumb-7.jpg" class="partner-gallery-thumb" />
<div style="clear: left;"></div>
</div>
</div>
</div>
</div><!--close partner box-->
<div style="clear: left;"></div>
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '<p class="pages"><strong>'.__('Pages', 'wpzoom').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<div class="clear"></div>
</div><!-- / .entry -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria', 'wpzoom');?>.</p>
<?php endif; ?>
<div class="clear"></div>
</div><!-- / .post -->
<div class="clear"></div>
</div><!-- / #content -->
<?php get_footer(); ?>
Your #slider container is set to display:none in your file style.css, at line 274.
Remove the display style or set it to block and your slider will show.