Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to get Media Queries to work on Portrait OR Landscape
    primarykey
    data
    text
    <p>here it is, this is the css, and the media queries is down below, just search @media and it will find it.</p> <p>Thanks so much for your help, idk why it is not working, the media query has no effect on the ipad emulator, in portrait mode, i changed the background just to see if it would work and it still did not, so not sure whats going on.</p> <pre><code>body {background-image:url('../images/space1.jpg'); background-repeat:no-repeat; background-size:200%; } body { color:white; } a, a:visited { color:#3399FF; text-decoration:none; } div.header{ text-align:right; font-size:200%; } div.header1 { text-align:right; font-size:125%; } div.logo{ margin-top:-40px; } #nav{ width:85%; height:3%; font-size: 26px; font-weight: bold; background-color: ; border-radius: 8px; text-align: center; margin: 0 auto; position:absolute; top:100px; left:120px; } #nav ul { height: auto; padding: 0px 0px; margin: 0px; background-color: #f2f2f2; border-bottom: 1px solid #ccc; display: inline-block; } #nav li { display: inline-block; padding: 20px; margin-left: auto; margin-right: auto; } #nav a { text-decoration: none; color: :#3399FF; padding: 8px 8px 8px 8px; } #nav a:hover { color: #000000; background-color: #FFF; li:hover ul { display: block; } } nav ul ul { display: none; } nav ul li:hover &gt; ul { display: block; } div.qui { text-align:center; font-size:200%; text-decoration:underline; } div.specs { text-align:center; font-size:175%; } ul.qui { text-align:center; font-size:150%; list-style-type: none; } .images { overflow: hidden; } .images img { float: left; margin: 0px; } div.1 { text-align: center; } .left { float: left; margin-left:20%; padding:10px; border:3px solid #585858 ; } .right { float: right; margin-right:20%; padding:10px; border:3px solid #585858 ; } p.v { text-align:center; } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { div.header{ text-align:right; font-size:120%; } div.header1 { text-align:right; font-size:85%; } div.logo{ margin-top:-40px; } div.logo { img height:150px; width:320px; } #nav{ width:85%; height:3%; font-size: 30%; font-weight: bold; background-color: ; border-radius: 8px; text-align: center; margin: 0 auto; position:absolute; top:100px; left:120px; } #nav ul { height: auto; padding: 0px 0px; margin: 0px; background-color: #f2f2f2; border-bottom: 1px solid #ccc; display: inline-block; } #nav li { display: inline-block; padding: 5px; margin-left: auto; margin-right: auto; } #nav a { text-decoration: none; color: :#3399FF; padding: 8px 8px 8px 8px; } #nav a:hover { color: #000000; background-color: #FFF; li:hover ul { display: block; } } nav ul ul { display: none; } nav ul li:hover &gt; ul { display: block; } div.qui { text-align:center; font-size:200%; text-decoration:underline; } div.specs { text-align:center; font-size:175%; } ul.qui { text-align:center; font-size:150%; list-style-type: none; } .images { overflow: hidden; } .images img { float: left; margin: 0px; } div.1 { text-align: center; } .left { float: left; margin-left:0%; padding:0px; border:3px solid #585858 ; } .right { float: right; margin-right:0%; padding:0px; border:3px solid #585858 ; } p.v { text-align:center; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload