CODEWITHSUNDEEP
javascriptjqueryhtmlcsssafari
Akhil
Akhil

Reputation: 443

CSS is not loading properly on mac OS safari and chrome

For the website i made CSS is not loading properly for Apple devices.

I maintained all the media query statements and style sheets separately. Hence it is not displaying properly in MAC OS safari and chrome. But rest all browsers and devices is fine.

link: referencelink

<link href="css/mobile.css" rel="stylesheet" media="screen and (max-width: 390px)" />
<link href="css/mobile.css" rel="stylesheet" media="screen and (min-width: 391px) and (max-width: 500px)" />
<link href="css/mobile.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 768px)" />
<link href="css/medium.css" rel="stylesheet" media="screen and (min-width: 769px)" />

This query only i maintained for fluidity. Guys help me out

Upvotes: 1

Views: 4146

Answers (3)

avvari prashanth
avvari prashanth

Reputation: 1

The same happened with me while I was developing my first web page using the text editor in mac.

I solved my problem by adjusting the quotation marks in keyboards. For that go to

preferences > keyboard > text

in the right side you'll find double quotes and single quotes. Select the option which has a simple type of quotes.

Upvotes: 0

Teenu Thomas
Teenu Thomas

Reputation: 33

Create CSS file and put the code inside the following technique

@media (min-width: 500px ) and (max-width: 800px)  {  

/* CSS property */ 

}

Upvotes: 0

anik4e
anik4e

Reputation: 493

Create one CSS file and put all the code inside this using following technic.

HTML:

<link href="css/style.css" rel="stylesheet" />

style.css code: 

@media screen and (max-width: 390px) {
/* 
*** Add CSS proparty ***
*/
}

@media screen and (min-width: 391px) {
/* 
*** Add CSS proparty ***
*/
}

@media screen and (min-width: 501px) {
/* 
*** Add CSS proparty ***
*/
}

@media screen and (min-width: 769px) {
/* 
*** Add CSS proparty ***
*/
}

It is tested. I use it in every project.

Upvotes: 1

Related Questions