Owl Slider CSS widths for desktop and mobile

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Owl Slider CSS widths for desktop and mobile

Post by simonmlewis »

Code: Select all

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.

[syntax=php]
<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>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Owl Slider CSS widths for desktop and mobile

Post by Celauran »

Looks like you're looking for four items deep when you've only got two. When you're taragetting elements with two specific classes, omit the space in the selector (e.g. '.owl-carousel.owl-theme'). That's assuming you even need that level of specificity.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Slider CSS widths for desktop and mobile

Post by simonmlewis »

Oh I see. So when the spacing is in the class:
class="owlslider newslide", and then within another div there are two like that, you do it in CSS like this:

.owlslider.newslide .innerslide.innernewslide
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Slider CSS widths for desktop and mobile

Post by simonmlewis »

This works, however the item div still seems to load after the item desktop div. so when it slides across, you get a blank slide...?!?!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply