80346

CSS Applying specific rule for a specific monitor resolution with only CSS is posible?

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

Answer1:

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 <strong>'orientation' media feature</strong>, 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 { ... } }

Answer2:

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 }

Recommend

  • How can I calculate font size for my UILabel?
  • How to rotate over HTML elements when pressing Tab key?
  • C# - Pan cursor
  • How to change the color of a check mark or 'more' arrow on a WinForms context menu?
  • Standard keys functions in curses module
  • Get both date and time in milliseconds
  • How do I install these PHP extensions on Ubuntu?
  • Display Current Video in Windows Phone 8 using AudioVideoCaptureDevice?
  • Hatch area using pcolormesh in Basemap
  • Condor job using DAG with some jobs needing to run the same host
  • Fixed Background Works in Chrome but Not Firefox?
  • Issue with SVN Commit for certain File Extension
  • javascript variables, What does var x = a = {} do?
  • inserting items in list in mongodb document
  • Zeromq with python hangs if connecting to invalid socket
  • Which browser have this strange user agent? (IOS device)
  • How to open multiple instances of a program in Linux
  • Manually Timing out a C# Thread
  • Making header act like google chrome mobile app address bar
  • F#: In which memory area is the continuation stored: stack or heap?
  • Responsive design method for collapsing a div
  • using html data-attributes as css-variable (i.e. text-shadow)
  • Outlines on links in IE9 remains when focus is changed
  • Is there a way to save the selected text and highlight it again once the page is refreshed?
  • Center align outputs in ipython notebook
  • Apache RewriteRule redirection with url encoded
  • Adjust width of select element according to selected option's width
  • Atlas images wrong size on iPad iOS 9
  • Email format validation in mvc3 view
  • Exchange data b/w iOS devices using Bluetooth 4.0
  • Excel - Autoshape get it's name from cell (value)
  • Modifying destination and filename of gulp-svg-sprite
  • How can I use Kendo UI with Razor?
  • jQuery tmpl and DataLink beta
  • Matrix multiplication with MKL
  • How to disable jQuery.jplayer autoplay?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • Converting MP3 duration time