2

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 1024x728, I would like to position my arrows inside of the 1010px container when the monitor is 1024x728, 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

1

2 Answers 2

2

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 {
        ...
    }
}
2
  • it's there a way to test it in my own monitor? or do I have to use another device?? cause I resize my firefox browser in 1024x728 pixel and I don't see any change :P...
    – ncubica
    Jan 7, 2012 at 21:13
  • To test in a desktop browser, you'll need to adjust the media queries, changing device-width to width and removing the orientation detection. Here's a simplified jsFiddle example, simulating the iPad's screen size of 768 x 1024. Resize your browser window and you'll notice the background color change from green to red.
    – rjb
    Jan 8, 2012 at 18:07
1

Yes, it is possible and you should search the web for "Responsive web design" and read about Media queries.

Something like this would be what you´re looking for;

@media handheld and (width: 1024px) {
  // add your CSS rules here
}
1
  • thanks for the tip, I will do it, and I gave the answer to @rjb only cause he responses before of you, thanks anyway.
    – ncubica
    Jan 7, 2012 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.