Comparing iPad and Desktop Devices

Working on the responsive site sandbox.mercomcorp.com, I encountered an issue where the CSS meant for an iPad device is affecting the desktop CSS. Shouldn't the iPad have its own separate media query from the desktop? Here's a snippet of the CSS:

#phone   {font-size:18px; }
p.serviceheader {font-size:18px; color:#464646;}
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;}
#servicelink {margin-top:-4px; margin-left:15px}
#securitylink {margin-top:20px; margin-left:2px}
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px}
#itlink {margin-top:-20px; margin-left:8px}
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;}
#personnellink {margin-top:6px; margin-left:15px}
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;}
#abouthome {margin-left:20px; float:left;}
#contacthome {font-size:23px; color:#464646; font-weight:bold;}
#prefooter {color:#464646; font-size:23px;}
#careershome {color:#464646; font-size:18px; margin-top:-5px;}
#jointeam {color:#464646; font-size:23px; margin-top:35px;}
#benefits {color:#464646; font-size:23px; margin-top:7px;}
#joinus {color:#464646; font-size:23px; margin-top:38px; }
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;}
p.corporateoffice {font-size:20px; color:#464646;}
p.officetext {color:#464646;}
#footer-links {font-size:12px;}
#chamberlogo {margin-top:10px; margin-left:28px;}
#sbalogo {margin-left:3px;margin-top:30px;}
#bicsilogo {margin-left:53px;}
#alliance {margin-left:15px;}
#mbchamber {margin-left:3px;}
#pmilogo {margin-left:55px;}
.prefooterlink a {color:#464646;}
#afcealogo {margin-bottom:-9px; margin-left:30px;}
#bbb {margin-left:17px;}
#infocommlogo {margin-left:40px;}
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;}
h1.pheader {font-size:26px;}
.customheader {margin-top:-60px;}
.bodycontentalign {margin-left:11px;}
.navalign {margin-top:-15px; margin-left:11px;}
.topphone {margin-top:-15px; margin-left:115px;}
.socialicons {margin-top:-32px; margin-left:60px;}
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC;
  color: #5a5858;
  float: left;
  min-height:260px;
  width: 260px;
}
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC;
  color: #5A5858;
  float: left;
  min-height:260px;
  width: 680px;
  margin-left:-95px;
}
.innerpagenav {background-color:#ececec;}
#block-69 {margin-top:-15px;}
#block-72 {margin-top:-74px; margin-left:-1px;}
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;}
#block-372 {margin-top:-55px;}
#block-370 {margin-top:-45px;}
#block-25 {margin-top:25px;}
#datacentertext {margin-top:-245px; margin-left:10px; color:white;}
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;}
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;}


/*regular site css*/

.container
{

        /*text-align:left;
        display:inline-block;
        width:100%;
        height:auto;
      overflow: hidden; */

   background-color:white;
    display:inline-block;
    height:100%;
    width: 100%;  
    /*border: solid 1px #aaa;*/  
    text-align: left;  
    font-size: 1em;
    /*letter-spacing:px;  */
    /*white-space: nowrap;  */
     /*line-height: 12px...
ioscssipadresponsive-design

Answer №1

Your issue might be related to the lack of spaces around the word "and" in your media queries. According to W3C guidelines, this is considered as malformed code: http://www.w3.org/TR/css3-mediaqueries/#error-handling

Therefore:

@media only screen and (max-width: 500px)and (orientation:landscape)/*iphone 4*/{

should actually look like this:

@media only screen and (max-width: 500px) and (orientation:landscape)/*iphone 4*/{

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Examples of how to specify a child class in CSS

Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...

css

How can CSS be used to make an element completely move off the visible screen?

Imagine if I had a div that was positioned outside of the visible area of the computer monitor screen. When using CSS transitions to move it to a specific position, it would create an effect of the element slowly moving in from outside of the screen. Add ...

css

Display of CSS color choices organized by row input

Is it feasible to dynamically color each table row based on the input in a designated column for that row? For example: B1 = 1 // Red row B2 = 1 // Red row B3 = 3 // Blue row B4 = 2 // Green row B5 = 1 // Red row And so forth? The datatable wi ...

csscolorsstylingcss-tables

swift tableview data reload problem - custom cell not displaying all elements

As a beginner in iOS programming, I'm using Swift in Xcode 6.0.1 to create a chat feature for my app. Utilizing web sockets, I have successfully implemented message sending and receiving from a server. However, I am facing difficulties when it comes t ...

iosiphoneuitableviewswiftxcode6

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss

Issues encountered while developing and testing an iOS emulator with an Ionic 2 application

I am having trouble with building or emulating in iOS despite having an up-to-date Xcode. Here are the steps I have taken so far: reinstalled npm added ionic hooks removed iOS using sudo added iOS using sudo (encountered errors during emulation and buil ...

iosnode.jsxcodeionic-frameworkionic2

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Do not engage with the website while animations are running

I'm working on a JavaScript project where I want to create textareas that grow and center in the window when clicked, and shrink back down when not focused. However, I ran into some issues with the .animate() function that are causing bugs. During QA ...

javascriptjquerycss

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

I am facing an issue where my website switches to mobile design at 850px, but the button I have on both desktop and mobile mode gets hidden under the header banner when it transitions to mobile design. I want to adjust the main body content of the website ...

htmlcssmedia-queries

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

My current project is using Scss in combination with Bootstrap for design. I have implemented purgeCss to remove unused Css, and customized my postcss.config.js file as follows: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ " ...

javascriptcssnext.jspostcsscss-purge

Transitioning from left to right, picture smoothly scrolls into view using Way

I've explored various websites and even attempted to decipher a waypoint guide, but unfortunately, I haven't had any success. The scroll function doesn't seem to be working with the code below. (source: ) Any assistance on this matter would ...

javascriptjquerycss

How can I use Angular 7 to create a background image for a View made up of multiple components?

Here is the HTML code that I am working with: <app-navbar></app-navbar> <router-outlet></router-outlet> My goal is to have an image set as the background for the home view, which consists of two components: navbarComponent and hom ...

htmlcssangularbootstrap-4angular7

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

javascripthtmlcssreactjsrouter

Emphasizing buttons that are in a "pressed" or "inactive" state

I've implemented three push buttons in my code using input with type="button", which act as toggle buttons (on/off). In the past, I used images to indicate when a button was pressed or reset, but now I want to achieve this effect using CSS. However, ...

cssformsbutton

Issues with mobile stylesheet loading properly

After migrating my website to a new server, I encountered an issue where the text displayed incorrectly on mobile devices but appeared fine on laptops. Surprisingly, when using Chrome's mobile viewer for inspection, everything looked as it should with ...

cssmobile

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is str ...

htmlcsstwitter-bootstrapresponsive-designless

Alignment of inner div within the footer

I'm struggling to align my footer navigation inline with my footer title. Check out this code snippet to see what I've tried so far: https://jsfiddle.net/nkzsufov/ I experimented with using absolute and relative positioning: .footerNav { margi ...

htmlcssresponsive-design

Responsive Input Navigation Bar CSS

How can I create a top bar that resembles the design of Google Play? I am struggling to make the input box flexible and fit the window size... The minimum width of Div.search is set to 250px but it's not working. Can someone help? *{ box-sizing: ...

cssflexbox

Using a combination of HTML and CSS3, craft this specific geometric design

Here's a sample image demonstrating how to create this button using CSS3. I would greatly appreciate any assistance! ...

htmlcsscss-shapes