Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Josue Negron
Josue Negron
1,770 Points
Posted by Josue Negron
Josue Negron
1,770 Points

Design breaking only in Chrome

Hi! I'm currently designing a responsive dashboard web application using media queries. So far it seems to be working on all browsers less Chrome. Is there something I'm missing on my media query that targets Chrome? Thanks for your help.

dashboard = http://report.ciracet.com:81/admin_app/Dashboard/Dashboard.aspx

Josue Negron
Josue Negron
1,770 Points
Josue Negron
Josue Negron
1,770 Points 
/* Media Queries */
@media only screen and (min-width: 768px) {
  .top-boxes, #resize-chrt2, 
  #resize-chrt3 { 
      display: inline-block; 
  }
  .top-boxes:nth-child(4), 
  #resize-chrt3 { 
      float: right; 
  }
  #two-chrts-rsz2 {
         display: inline-block;
         width: 70%;
         float: right;
  }
  #two-chrts-rsz1 {
      width: 30%;
      float: left;
  }
  .chart-container {     
     margin-top: 5px;     
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .top-boxes { width: 49%; }
  .top-boxes:nth-child(2) { float: right; }
  [class*="entypo-"]:before { font-size: 7.3vw; }
  .top-boxes > p > span:first-child { font-size: 3.7vw; }
  .top-boxes > p { font-size: 2.3vw; }
  .chart-header { font-size: 1.7vw; }
  #resize-chrt2, 
  #resize-chrt3 { 
      width: 49.65%; 
  }
}

@media only screen and (min-width: 1025px) {
  .top-boxes { width: 24.5%; }
  [class*="entypo-"]:before { font-size: 4vw; }
  .top-boxes > p > span:first-child { font-size: 1.9vw; }
  .top-boxes > p { font-size: 1.3vw; }
  .top-boxes > * { padding-top: 15px; }
  #resize-chrt2, 
  #resize-chrt3 { 
      width: 24.3%; 
  }
  #resize-chrt1, 
  #resize-chrt4, 
  #resize-chrt5 { 
      display: inline-block; 
  }
  #resize-chrt4 { float: left; }
  #resize-chrt1, 
  #resize-chrt4 { 
      width: 50%; 
  }
  #resize-chrt5 { 
      width: 49.55%; 
      float: right; 
  }
  .chart-header { font-size: 1.3vw; }
}
Victor Rodriguez
Victor Rodriguez
15,015 Points

do you have any other css in your project? if so, check to make sure that all special properties are listed for each browser. for example: border-radius. Chrome: -webkit-border-radius, Mozilla: -moz-border-radius

Josue Negron
Josue Negron
1,770 Points
Josue Negron
Josue Negron
1,770 Points

Hey Victor, thanks for all your help. Just to let you know that the problem was caused by update panels surrounding my div elements. I made a test removing them and the page stopped breaking on Chrome. Thanks!

1 Answer

Victor Rodriguez
Victor Rodriguez
15,015 Points

vw is supported very poorly in chrome under 19- as a sizing property. It may get better in the future, but for now it is supported poorly. Safari is similar and i'm willing to bet it may give you the same issues. It should have been fixed in chrome 20+ so you may have an older version?

Josue Negron
Josue Negron
1,770 Points
Josue Negron
Josue Negron
1,770 Points

Hey Victor! Thanks for your fast response. To test your theory I changed all "font-size" css properties from "VW" to "EM" but I still get the same result. Do you have any another idea in what could be causing the problem? I also set the overflow property to hidden so that the content inside the containers don't cause the containers to break (but not sure if that helps).