0

I got media queries working perfect on second html page with this code

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px)  {
    .snebild img {
        width: 50%;
        max-width: 50%;
        right: 2%;
    }
    .title {
        margin-left: 4%;
        position: absolute;
        top: 10%;
    }
}

But on my second page im trying to change the font size so it looks good on lower resolutions but using same code just changing to correct class and p element but nothing works.

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px)  {
    .introus p {
        font-size: 8px;
    }
}

This is the HTML

<div class="introus">
    <h2>Main Title</h2>

    <h4>Second title</h4>

    <p>Text to change size on when using lower resolution such as Iphones</p>
</div>
Jeroen
  • 1,168
  • 1
  • 12
  • 24
Peterssoen
  • 157
  • 3
  • 12
  • What is up with using the second page.? – Riddler Dec 23 '16 at 12:22
  • All else being equal, there is no reason why the second code block wouldn't work when the first one does, so either (1) You have other CSS that is interfering but doesn't appear in the question or (2) You are hitting a minimum font size setting. – Quentin Dec 23 '16 at 12:23
  • What do you mean by "my second page"? Is that page using a different CSS sheet? Are you also selecting the page in CSS so that the second media rule you mentioned only applies to it? Also, use (max-width: #px)` instead of `(max-device-width: #px)` - explanation here > http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width –  Dec 23 '16 at 12:24
  • Might another selector be influencing the size of your `p`'s font? Most browsers can help pin down the source of the issue by specifying which selector is resposible for applying any given style. – Yemachu Dec 23 '16 at 12:32
  • Ok to clarify second page is another html with another css ( sorry) ;). And thanks Yemachu i noticed that there is another .introus p with font-size that is interfering, how would i solve this? since i need that font size for normal view but this font size for view on smaller screens? – Peterssoen Dec 23 '16 at 12:37
  • Ok forget about the page that works. In the sheet for the page that has an issue. Are you using any other @media rules? (other than the one you mention in your question that's not working.) –  Dec 23 '16 at 12:39
  • I don't know what the rest of your css looks like, but in this case, I think you should have a look at the order in which your css appears (general style first, media queries later). – Yemachu Dec 23 '16 at 12:41
  • No this is the only one in this sheet. – Peterssoen Dec 23 '16 at 12:42
  • Is there a change you've made a typo in those classes? – roberrrt-s Dec 23 '16 at 12:46
  • There doesn't seem to be anything wrong with the CSS. I think the simplest way you can get a fix for this is to post a link to the page and have someone here examine it - in context - with a fresh set of eyes. Other than that all you'll get is guessing. –  Dec 23 '16 at 12:48
  • Fixed it lol.. Thank you Yemachu , the problem was the order of my CSS i had the @media rule above the interfering code. Placed the media rule below the other css now and it works perfect! thanks everyone. – Peterssoen Dec 23 '16 at 12:49

2 Answers2

-1

I assume you are testing it on a desktop device and not on a mobile device. Try to change min-device-width to min-width that should work.

Correct me if I'm wrong.

Jeroen
  • 1,168
  • 1
  • 12
  • 24
-1

You should use min-width instead of min-device-width because the main difference between width and device-width is that device-widths don’t always match the layout viewport of said device.

Changing that parameters the code works fine

@media only screen and (min-width: 200px) and (max-width: 1099px)  {
.introus p {font-size: 8px;}
}
<div class="introus">
            <h2>Main Title</h2>

            <h4>Second title</h4>

            <p>Text to change size on when using lower resolution such as Iphones.</p>
        </div>
Rafa Romero
  • 2,667
  • 5
  • 25
  • 51