[syntax=php]This could be a real quick one for you CSS experts to answer as I am a little stumped.
We are looking at the homepage. On an Android tablet, it seems to ignore quite a bit of code, so we now need to make things work purely via widths of screens.
This does mean that images will be loaded even if not displayed (for mobile) when it is a mobile view, and same for desktop. Hopefully this isn’t bad for speed.
Here’s the issue. The slider at the top called “Owl Slider”, needs to have a mobile and desktop version. It does now. But we need to alter it so it does it purely on width.
The attached “owl-code.txt” is the PHP script running. You will see “class-‘item mobile’” for mobile, and item desktop, for desktop.
One turn off one display, and the other follows suit.
I’m trying to use this CSS to control it, but it won’t have it. If I bring the window size down to 765, the desktop one remains on screen.
<style>
@media screen (max-width: 768px)
{
.owl-carousel .owl-theme .item .desktop
{
display: none;
}
}
@media screen (min-width: 769px)
{
.owl-carousel .owl-theme .item .mobile
{
display: none;
}
}
</style>
<link href="/js/owlslider/css/custom.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/owl-carousel/owl.carousel.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/owl-carousel/owl.theme.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/google-code-prettify/prettify.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/owl-homepage-override.css" rel="stylesheet" property='stylesheet'>
<script src="/js/owlslider/jquery-1.9.1.min.js"></script>
<script src="/js/owlslider/owl-carousel/owl.carousel.js"></script>
<script src="/js/owlslider/bootstrap-collapse.js"></script>
<script src="/js/owlslider/bootstrap-transition.js"></script>
<script src="/js/owlslider/bootstrap-tab.js"></script>
<script>
$(document).ready(function() {
$("#owl-big").owlCarousel({
autoPlay: 5000,
stopOnHover: true,
navigation : true,
slideSpeed : 5000,
paginationSpeed : 2000,
singleItem : true,
touchDrag: true,
mouseDrag: true
});
});
</script>
<div id="owl-big" class="owl-carousel owl-theme">
<?php
$query = ("SELECT * FROM homepage WHERE section = 'mobileslider' ORDER BY priority ASC");
$result = $pdo->query($query);
while ($row = $result->fetch(PDO
::FETCH_OBJ))
{
echo "<div class='item mobile'><a href='$row->url'><img src='/images/pages/$row->image' alt='$row->image'></a></div>";
}
$query = ("SELECT * FROM homepage WHERE section = 'desktopslider' ORDER BY priority ASC");
$result = $pdo->query($query);
while ($row = $result->fetch(PDO
::FETCH_OBJ))
{
echo "<div class='item desktop'><a href='$row->url'><img src='/images/pages/$row->image' alt='$row->image'></a></div>";
}
echo "</div>"; 
Login
Register
FAQ
Search
