CODEWITHSUNDEEP
htmlioscssiphoneipad
Roberto Flores
Roberto Flores

Reputation: 789

CSS Styling for IPAD not working

Problem: I have the following styling that targets mobile phones for the footer:

@media (max-width: 800px){
    #footer-affiliation { 
        background-color: #0077C0; 
        color: rgb(255, 255, 255); 
        padding: 5px;
        height:110px;


        width:109.01% !important;
        margin-left:-15px;
        }
}

However, it affects the footer on the IPAD. I did the following to target only IPAD's and IPhones. For the iphone css styling works fine, however for the IPAD styling is not working:

    @media only screen 
    and (min-device-width : 480px) 
    and (max-device-width : 800px) 
    and (orientation : portrait) {
     #footer-affiliation { 
        background-color: #0077C0; 
        color: rgb(255, 255, 255); 
        padding: 5px;
        height:110px;


        width:104% !important;
        margin-left:-15px;
    }
}

I would like to know what other approach I can do to target IPAD's only.

Thank You

Upvotes: 0

Views: 2043

Answers (1)

Vinodh
Vinodh

Reputation: 5268

For targeting iPad use following media query 

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

Detailed info available in this site for various device in iPad

CSS media Queries for iPad

Upvotes: 1

Related Questions