how can i solve this challenge:

Question

Write a media query at 705px where the layout begins to break, that forces grid1 through grid6 to span 100% width of the container.
this is the code :
body {
  font-family: 'Nunito', sans-serif;
  font-weight: 100;
  font-size: 1.25em;
  color: #faf3bc;
  background-color: #420600;
}
.grid1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid2 { width: 32.5%; } /* 260px/800px = 32.5% /
.grid_3 { width: 49.375%; } / 395px/800px = 49.375% /
.grid_4 { width: 65.625%; } / 525px/800px = 65.625% /
.grid_5 { width: 83.125%; } / 665px/800px = 83.125% /
.grid_6 { width: 100%; } / 800px/800px = 100% */
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6 {
  margin-right: 1.25%;
  float: left;
  display: block;
}
.alpha { margin-left:0; }
.omega {margin-right:0; }
.container{
  width: 90%;
  max-width: 800px;
  padding: 4% 0;
  margin: auto;
}
img {
  max-width: 100%;
}
h1 {
  font-size: 1.750em;
  line-height: 1.25em;
  font-weight: 100;
  letter-spacing: -2.75px;
}
h2 {
  font-weight: 100;
  font-size: 1.15em;
  color: #b4c34f;
}
.cupcake {
  box-sizing: border-box;
  background-color: #faf3bc;
  padding: 8px;
  margin: 0 0 5% 0;
}

Ivan Uvarov · Answer

This should be a correct solution. You just define max-width to create a breakpoint and change width of grid1 - grid6 inside it.
css
@media screen and (max-width:705px) {
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6 {
    width: 100%; 
  }
}

Welcome to the Treehouse Community

Looking to learn something new?

lina hammad

lina hammad

how can i solve this challenge:

1 Answer

Ivan Uvarov

Ivan Uvarov

lina hammad

lina hammad