Media Queries Not Obeying

[Gilead]

Been working on a restaurant site and decided on a 4 column set up for the menu. Everything was fine until I was making it responsive.
For some reason at 1025 to 1344 no matter how I set the width of the columns, nothing changes. Everything down to 320 is great and everything from 1344 to full is fine. I used the same technique, change the width of the columns. The problem is the text runs together and makes it hard to read. Normally changing the width works wonders. I'm doing this on a desktop using mozilla with Responsive design view and just changing the window size.

Here is the CSS

.menudl{width:5%; }
  .restaurant_menu__list 
 {
      /* Just for this example */
      list-style: none;
      padding: 0;
      font-size: 14px; /* For em cross-browser sizing */

      
     }
     
     .restaurant_menu__row 
 {
      border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
      position: relative;
      float: left;
      line-height: 1.2em; 
      
      margin: -.9em 0 0 0; 
      width: 100%;
      
      text-align: left; 
     }
     
     .restaurant_menu__meal span
     , .restaurant_menu__price
     {
      /* For .restaurant_menu__row background rewriting */
     }
     
     .restaurant_menu__meal 
 {
      padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
     }
     
     .restaurant_menu__meal span 
 {
      margin:0;
     position:relative;
     top: 1.6em;
     padding-right:5px; /* Custom number for space between text and dotted line */
     }
     
     .restaurant_menu__price 
 { 
     padding:1px 0 1px 5px;
     position:relative;
     top:.4em;
     left:1px;/* ie6 rounding error*/
     float:right;
     }
 
 .dualspan{padding-right:5.5em; }
 .title{color:#FF0000; font-size:large; }
 .separator{padding-bottom:3em; }
 .red{color:#FF0000; }
 .grinder{width:100%; }
 .sandwich{ width:100%;}
 .chickenwich{margin-left:-.5em; width:100%; }
 .greekfries{width:100%; }
 .soup{width:100%; }
 
  .col1,.col2,.col3,.col4
{
 float: left;
 margin-left: 1%;
}

.col1 { width: 22%; }
.col2 { width: 22%; }
.col3 { width: 22%; }
.col4 {width: 22%; }
  
section
{
  padding-bottom:120em;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 360px) and (orientation : portrait)
 
  {
   .col1 { width: 95%; }
   .col2 { width: 95%; }
   .col3 { width: 95%; }
   .col4 { width: 95%; }
   
    section
  {
  padding-bottom:376em;
  }
}

@media only screen and (min-device-width : 361px) and (max-device-width : 620px) and (orientation : portrait)
{
 .col1 { width: 95%; }
  .col2 { width: 95%; }
  .col3 { width: 95%; }
  .col4 { width: 95%; }
 
  section
{
padding-bottom:450em;
 }
 
}

 @media only screen and (min-device-width : 621px) and (max-device-width : 729px) and (orientation : portrait)
 {
 .col1 { width: 40%; }
  .col2 { width: 40%; }
  .col3 { width: 45%; }
  .col4 { width: 50%; }
 
   section
 {
  padding-bottom:275em;
  }
 }
 
@media only screen and (min-device-width : 730px) and (max-device-width : 768px) and (orientation : portrait)
{
 .col1 { width: 35%; }
  .col2 { width: 35%; }
  .col3 { width: 40%; }
  .col4 { width: 45%; }
 
   section
 {
padding-bottom:280em;
 }
} 
 
 @media only screen and (min-device-width : 769px) and (max-device-width : 800px) and (orientation : portrait)
 {
 .col1 { width: 30%; }
  .col2 { width: 30%; }
  .col3 { width: 37%; }
  .col4 { width: 40%; }
 
   section
 {
padding-bottom:210em;
  }
 } 
 
 @media only screen and (min-device-width : 801px) and (max-device-width : 900px) and (orientation : portrait)
 {
 .col1 { width: 30%; }
  .col2 { width: 30%; }
  .col3 { width: 37%; }
  .col4 { width: 40%; }
 
   section
 {
padding-bottom:207em;
 }
 
 }
 
@media only screen and (min-device-width : 901px) and (max-device-width : 980px) and (orientation : portrait)
{
 .col1 { width: 28%; }
  .col2 { width: 28%; }
  .col3 { width: 40%; }
  .col4 { width: 45%; }
 
   section
 {
padding-bottom:220em;
 }
} 

@media only screen and (min-device-width : 981px) and (max-device-width : 1024px) and (orientation : portrait)
{
 .col1 { width: 28%; }
  .col2 { width: 28%; }
  .col3 { width: 40%; }
  .col4 { width: 45%; }
 
   section
 {
padding-bottom:220em;
 }
} 
  
  @media only screen and (min-device-width : 1025px) and (max-device-width : 1284px) and (orientation : portrait)
{
 .col1 { width: 22%; }
  .col2 { width: 22%; }
  .col3 { width: 30%; }
  .col4 { width: 35%; }
 
   section
 {
padding-bottom:220em;
 }
}

Here is the first column.

<div class="col1">
      <ul class="restaurant_menu__list">
 <div class="title"><a name="roastbeef">ROAST BEEF</a></div>
 <li class="restaurant_menu__row">
  <!-- Inside div we need inline element, to handle multiline meals -->
  <div class="restaurant_menu__meal"><span>12" Sub Roll(<i>7.5 oz</i>)</span></div>
  <span class="restaurant_menu__price">7.99</span>
 </li>
  
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Giant (<i>6 oz on an onion roll</i>)</span></div>
  <span class="restaurant_menu__price">6.75</span>
 </li>
 
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Regular (<i>4 oz on a sesame bun</i>)</span></div>
  <span class="restaurant_menu__price">5.75</span>
 </li>
 
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Junior (<i>2.5 oz on a plain bun</i>)</span></div>
  <span class="restaurant_menu__price">4.25</span>
 </li>
 </ul>
 
<div class="separator"></div><div class="separator"></div>
 <ul class="restaurant_menu__list">
 <div class="title"><a name="seafooddinner">SEAFOOD</div>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Haddock Dinner</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
  
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Scallop Dinner</span></div>
  <span class="restaurant_menu__price">17.99</span>
 </li>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Shrimp Dinner</span></div>
  <span class="restaurant_menu__price">14.99</span>
 </li>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Clams(Whole)</span></div>
  <span class="restaurant_menu__price">17.99</span>
 </li>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Two-Way Combo</span></div>
  <span class="restaurant_menu__price">18.49</span>
 </li>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Seafood Platter</span></div>
  <span class="restaurant_menu__price">19.99</span>
 </li>
</ul>
<ul class="restaurant_menu__list">
 <i>All seafood items are trimmed, breaded and cooked to order and are served with tartar sauce, coleslaw, and your choice of rice, French fries, or onion rings</i>

 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Clam Roll <i>with fries coleslaw</i></span></div>
  <span class="restaurant_menu__price">14.99</span>
 </li>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Lobster Roll <i>with fries & coleslaw</i></span></div>
  <span class="restaurant_menu__price">14.99</span>
 </li>
 </ul>
 <div class="separator"></div>
 
 <ul class="restaurant_menu__list">
 <div class="title"><a name="dinners">DINNERS</div>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Sirloin Steak Tips</span></div>
  <span class="restaurant_menu__price">11.95</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Beef Stir Fry</span></div>
  <span class="restaurant_menu__price">11.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Beef Terriyaki</span></div>
  <span class="restaurant_menu__price">11.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Chicken Wings</span></div>
  <span class="restaurant_menu__price">10.75</span>
 </li>
<li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Chicken Kabobs</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Chicken Fingers</span></div>
  <span class="restaurant_menu__price">10.75</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Chicken Terriyaki</i>)</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Buffalo Wings</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Buffalo Fingers</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Honey Spice Chicken</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Chicken Stir Fry</span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Honey Spice Shrimp</span></div>
  <span class="restaurant_menu__price">14.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Buffalo Shrimp</span></div>
  <span class="restaurant_menu__price">14.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Shrimp Stir Fry</span></div>
  <span class="restaurant_menu__price">14.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Homemade Turkey Dinner <i>with Sweet Potato Fries</i> </span></div>
  <span class="restaurant_menu__price">10.99</span>
 </li>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Fresh Fried Chicken Dinner</span></div>
  <span class="restaurant_menu__price">10.99</span><br />

 </li><i>All above dinners served with fries, rice or salad</i>
 <li class="restaurant_menu__row">

  <div class="restaurant_menu__meal"><span>Bentley's Combo Platter</span></div>
  <span class="restaurant_menu__price">9.95</span>
 </li>
<ul class="restaurant_menu__list">
 <i>3 Chicken Wings, 3 Chicken Fingers, 3 Mozzarella Sticks. French Fries, Onion Rings and Sauce</i>
</ul>
</ul>
<div class="separator"></div> 
<ul class="restaurant_menu__list">
 <div class="title"><a name="kiddinners">KID'S DINNERS</a></div>
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Junior Roast Beef </span></div>
  <span class="restaurant_menu__price">6.99</span>
 </li>
  
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>1/4 Hamburger </span></div>
  <span class="restaurant_menu__price">6.99</span>
 </li> 
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Junior Hot Dog </span></div>
  <span class="restaurant_menu__price">5.99</span>
 </li> 
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Chicken Fingers <i>3 Pcs</i></span></div>
  <span class="restaurant_menu__price">6.99</span>
 </li> 
 <li class="restaurant_menu__row">
  <div class="restaurant_menu__meal"><span>Chicken Wings <i>4 Pcs</i></span></div>
  <span class="restaurant_menu__price">6.99</span>
 </li> 
 <ul class="restaurant_menu__list">
 <i>All above kid's dinners served with French fries and drink</i>
</ul><br />
 <div class="separator"><div align="center"><img src="grinder.jpg" class="grinder" alt="" title="" /></div></div>
  </div>

Thanks for the help! If this belongs in another forum, do let me know.

[not2easy]

Is this html5? I ask because "name=" is not valid for html5 and html5 does not accept <div in <ul or <i in <ul either. Italics should be in the css whenever possible. <div align="center"> is not valid after html4. There are other issues in the html regarding open/close tags for <a and <ul that should be cleaned up.

My suggestion is to take the entire page or its URL to the w3c tools that can list the errors. Then, after the errors are addressed if something is not performing the way you expect we can take a look. Without correcting the basic errors, it is pretty hard to see just what is out of step, sorry. The w3c tools are found here:
HTML Validator: [validator.w3.org...]
CSS Validator: [jigsaw.w3.org...]

[lucy24]

<tangent>
Isn't the whole point of multi-column layout that you don't need to think about viewport width? Instead of specifying a number of columns, set a column width in ems. Then the end user will see just as many columns as the device has room for. (It rounds up, so for example if you say column-width: 12em and the viewport is 34em, it will fill the screen with two columns.)
</tangent>

[Gilead]

No errors in CSS.

[Gilead]

Lucy- Thanks for the idea. Can you post an example?

[lucy24]

Can you post an example?

Most of mine look like this (with vendor prefixes for backward compatibility, mobiles won't need them):

div.links {column-gap: 1em; -moz-column-gap: 1em; -webkit-column-gap: 1em;
column-width: 5em; -moz-column-width: 5em; -webkit-column-width: 5em;}

That's just the first one I found in the first folder I opened. "column-gap" is essentially the same thing as a horizontal margin; it means the empty space between columns. (There's also a column-rule if you want to draw a line for extra emphasis.) "column-width" is what it sounds like.

If you have both a "column-count" and a "column-width" (normally you wouldn't), browsers tend to be pretty good about picking whichever one gives wider columns. Note that you don't need to say anything about using multiple columns; the mere fact that you've specified a column-something in the CSS tells the browser what to do.

:: shuffling papers ::

[w3.org...]
As you can tell by the date, this particular part of CSS3 has been around for quite a while. There's also a "colums" shorthand which I've never used and, oops, didn't even know existed.

"pseudo-algorithm", hm, wonder who came up with that descriptor? :)

[Gilead]

Just tried swapping out width: x% with 18em on each one and changed the font size. No change. Changed the em to 30 each and the font to 100px, still no change. I still don't get it! Any further ideas?

[Gilead]

SOLVED!

While the columns wouldn't change either by percent or by EM, I did change the font size and that made all the difference! It all works now with no squishing! Thanks for the help.
@not2easy Looks like I need a new editor- this one is using deprecaded code. Will have to wait for an upgrade.