WordPress.org

Support

Responsive

Viewing 1 replies (of 1 total)
  • here’s my method:

    1. create a dynamic sidebar for every device resolution you want
    2. use css property of @media screen. set the wanted slider in “visibility: visible” and the unwanted in “visibility: hidden;”
    3. display the ml post slider in the visible class, and set the width
    4. play with css “margin” (top/bottom) property to align the slider properly

    for example:

    <style>
    /* default */
    .resolution_greater_500
    {
    visibility: visible;
    }
    
    .resolution_smaller_500
    {
    visibility: hidden;
    }
    
    /* for devices with resolution under 500px */
    @media screen and (max-width: 500px){
    
    .resolution_greater_500
    {
    visibility: hidden;
    }
    
    .resolution_smaller_500
    {
    visibility: visible;
    }
    
    }
    
    </style>
    
    <div class="align_slider">
    <div class="resolution_greater_500">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('sidebar1') ) : ?>
    <?php endif; ?>
    </div>
    
    <div class="resolution_smaller_500">
    <?php if ( !function_exists('dynamic_sidebar')
    || !dynamic_sidebar('sidebar2') ) : ?>
    <?php endif; ?>
    </div>
    
    </div>

    the align_slider class is depended on your choice to the slider height

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive’ is closed to new replies.
Skip to toolbar