Home/ Questions/Q 7925925
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T18:30:18+00:00

I’m working on making my current design responsive. I started out using @media screen…

  • 0

I’m working on making my current design responsive. I started out using @media screen... but nothing in the design would change. I attempted using the html, div, p, a, li, td { -webkit-text-size-adjust: none; } to see if that would at least help the fonts change sizes (I’m using em), but nothing changed.

Then I switched to <link type="text/css".... I currently have 3 media query files linked in my HTML document and I’m using HTML5/CSS3.

My question is: Why is the document only referencing the first file? I took out the core stylesheet and am using nothing but directly targeted sheets to see if that would stop it from just using the first stylesheet, but it hasn’t. The fonts haven’t resized. The containers won’t resize. The images won’t resize or remove. Only the first stylesheet is referenced – the others are ignored.

These are my current linked stylesheets:

<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" />

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />

Edit: The stylesheet does change from one to the other, but the styles themselves don’t change. It’s like 1280 stylesheet is overridding all the others with its styles.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe you’re looking for max-width instead of max-device-width?

    Former is for display area like the browser for example and the latter is the actual device area.

    Also, you want to put the smallest one (800px in your case) at the end.

    try this:

    <link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />
    • 0