Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

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
/* 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; }
}

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

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

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

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).