Question

I have a design with a width;1010px this design have two Arrow for a slideshow “left” and “right” and are out of the box (width:1010px div container), in an absolute position.

.showcase-arrow-next
{
    right: -40px;
    top:150px;
    background-position: -70px 0px;
}

so I would like to know if it’s posible to declare a rule for specific monitor resolution, actually for ipad resolution 1024×728, I would like to position my arrows inside of the 1010px container when the monitor is 1024×728, I know how to do this with prototype, jquery, javascript alike solutions, But I don’t know if it’s posible to resolve this problem with only css approach.

thanks in advance

Answer 1

Use a CSS3 Media Query to apply conditional styles to devices with a specific size:

<style>
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {   
        .showcase-arrow-next {
            right: -40px;
            top: 150px;
        }
    }    
</style>

You can also detect the orientation of the device (Portrait vs. Landscape) by using the ‘orientation’ media feature, which can be combined like so:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
    and (orientation: portrait) {
    /* iPad Portrait Mode */

    .showcase-arrow-next {
        ...
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
    and (orientation: landscape) {
    /* iPad Landscape Mode */

    .showcase-arrow-next {
        ...
    }
}