0

I am modifying my CSS3/HTML5 site to work with different Medial Queries.

The site pages are in the Root directory. The CSS files are within a folder in the root directory called css.

Within the HEAD tags of my page, I have one CSS file for the default stuff and then I have another one for iPad in an external CSS file called ipad.css

When I am in the Developer Tools within Google Chrome, it doesn't seem to be applying the rules within the ipad.css file. I know this because I am wanting to change the text size of an element and it is not changing. Nothing is happening.

This is what I have within the HEAD tags:

<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles">
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">

According to the Google Chrome Developer Tools, an iPad width is 768px. I have referenced this within the link tag. Any ideas or suggestions welcome.

Gaël Barbin
  • 3,769
  • 3
  • 25
  • 52
Padraig MacUidhir
  • 1
  • 5
  • You need to learn **now** how to **EDIT** your question. You have put all the additional information into **ANSWERS**! – connexo May 25 '15 at 21:44

2 Answers2

0

Use max-width: 768px rather than max-device-width: 768px.

Also, remember to specify a viewport meta tag in the head section of your html.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Also, you might want to check

What is the difference between max-device-width and max-width for mobile web?

Also, keep in my you're not targeting devices, you're targeting resolutions.

Another possible source of your problem might be that you are using less specific selectors in your ipad.css. Don't forget that the styles from your default.css are also used on resolutions lower than 769px!

To test this, put this css rule on the very top of your ipad.css:

* { display: none !important; }

If your site vanishes then, your stylesheet is loaded and applied.

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
  • I tried that and nothing happened still. I even changed the color of the font to see if it would change for testing and nothing happened. – Padraig MacUidhir May 25 '15 at 21:31
  • I tried that and nothing happened for me. I even went to change the font color to see if the css file is being read and the color stayed the same. No change. I have a div class called banner-textoverlay with a p tag within, so in my css file, I wrote the following for testing purposes: – Padraig MacUidhir May 25 '15 at 21:33
  • Please add this information in your question rather than in the comments. – connexo May 25 '15 at 21:34
0

I tried the max-width as well and the style isn't applying. Even if I change the font-color of the text within the div class (p tag), nothing is happening.

As an example, I have a div class called banner-textoverlay so, in my ipad.css file, I wrote the following to see if it would change the text color and nothing happens at all.

.banner-textoverlay p {
    font-color:#000000;
}
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
Padraig MacUidhir
  • 1
  • 5
  • `font-color` does not exist. Use `color`. Also, put this in your **question**, **not** as an answer! – connexo May 25 '15 at 21:38