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.