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

CSS

Diego Murray
Diego Murray
2,515 Points
Posted by Diego Murray
Diego Murray
2,515 Points

The responsiveness of my website doesn't work in Safari but works in Chrome. What might be wrong and how can I fix it?

My nav and header alter at different breakpoints but the content in my body doesn't. On my Home page my three column layout doesn't shrink to a 2 column layout at a smaller screen size. My About page doesn't shift to a 1 column layout. And the same with my Contact page.

My workspaces: https://w.trhou.se/ysaajcn57f

Diego Murray
Diego Murray
2,515 Points
Diego Murray
Diego Murray
2,515 Points

Thanks so much Josh. But won't that defeat the purpose of having 2 separate breakpoint media queries?

I feel like if I do what you have in code below it won't work properly.

Josh Cummings
Josh Cummings
16,310 Points
Josh Cummings
Josh Cummings
16,310 Points

Hi Cristo,

Part of responsive web design is to add your media queries based on the design of your site. Whether it's one or ten breakpoints, you need to look at the site your designing to decide where the breakpoints should be.

You could simply change your first media query in responsive.css to be something higher than 500px.

For example:

@media screen and (min-width: 500px) {

  /***********************
  TWO COLUMN LAYOUT
  ************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

  /************************
  Page: HOME PAGE
  *************************/

  #gallery li {
    width: 28.3333%;
  }

  /************************
  Page: ABOUT
  *************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

But 500px is so closed to the media query you already have at 660px, so why add extra code? Based on what I saw, when your site gets to 660px it moves to everything to the two columns, which looks nice.

Hope this helps.

1 Answer

Josh Cummings
Josh Cummings
16,310 Points
Josh Cummings
Josh Cummings
16,310 Points

Hi Crsito,

The reason your media queries aren't working in Safari is because Safari's minimum screen width around 500px. Chrome goes all the way down to 400px.

Your media query kicks in at 480px, which is why it is working in Chrome, but not Safari.

Try try moving all the code in your responsive.css file into the min-width: 660px media query like so:

@media screen and (min-width: 660px) {

  /************************
  HEADER
  *************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
  }

  /***********************
  TWO COLUMN LAYOUT
  ************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

  /************************
  Page: HOME PAGE
  *************************/

  #gallery li {
    width: 28.3333%;
  }

  /************************
  Page: ABOUT
  *************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}