title: Screens with 1024px width and Tablets of 1024px width are conflicting
body: <p>I am using MediaQuery to create a responsive website layout as you will see below, everything works fine apart from one evil problem!</p>
  
  <p>core.css is applied to the site by default and it is the style-sheet for the desktop version. But as you can see in this link, when the screen width is 1024px or below it will link to the tablet-and-mobile.css so it applies the tablet and phone styles. <code>&lt;link rel="stylesheet" type="text/css" media="screen and (max-width : 1024px)" href="assets/css/tablet-and-mobile.css"/&gt;</code></p>
  
  <p>The problem is that many users still user desktops with a screen that have the width of 1024px and tablets width is also 1024px! The fact the both screens have the same width is conflicting the whole system as when the website is visited from a desktop of a screen with width 1024px it applies the tablet version.</p>
  
  <pre><code>@media screen and (max-device-width: 1024px)
  </code></pre>
  
  <p>I have tried everything I could! but can't seem to be able to fix it. What would you recommend? Here is a live template: www.loaistudio.com</p>