News Grid (11) Media Query

Navigation

#main-nav .social {
  display: none;
}

#main-nav .container {
  grid-template-columns: 1fr;
  grid-gap: 1.2rem;
}

#main-nav ul,
#main-nav .logo {
  justify-self: center;
}

#main-nav ul li a {
  padding: 0.50rem;
}

sns 아이콘을 지웠다.

로고와 메뉴가 세로 한 줄로 배치되도록

grid-template-columns:1fr;을 주고

각자 중앙에 배치될 수 있게 justify-self:center;을 주었다.

링크 버튼이 좀 작아졌으면 해서 패딩을 조절.

 

 

#home-articles .articles-container {
  grid-template-columns: repeat(2, 1fr);
}

#home-articles .articles-container > *:first-child,
#home-articles .articles-container > *:last-child {
  grid-template-columns: 1fr;
  grid-column: 1;
}

원래 articles-container는 grid-template-columns:repeat(3, 1fr); 이었는데

작은 모니터에서는 column 2개로.

 

첫번째 아티클과 마지막 아티클이 그 내부에 grid를 가지고 span해 있었는데

작은 스크린에서는 1fr로 만들고

grid-column:1; (span하지 않고 원래 default값)

 

 

 

더 작은 모바일 화면에서

@media(max-width: 600px) {
  /* Stack Grid Items */
  #showcase .showcase-container,
  #home-articles .articles-container,
  #main-footer .footer-container {
    grid-template-columns: 1fr;
  }

  #main-footer .footer-container > *:last-child {
    grid-column: 1;
  }
}

showcase와 article과 footer container 모두를 grid-template-columns:1fr;로 만들어준다.

이것만 하면 footer에 아무 변화가 없는데 그 이유는 원래 화면에서 마지막 element를 span해줬기 때문.

그걸 제거해야지 완벽하게 items가 stack together.

그래서 footer container의 마지막 child를 선택해서 grid-column:1; 

 

@media(max-width: 600px) {
  /* Stack Grid Items */
  #showcase .showcase-container,
  #home-articles .articles-container,
  #main-footer .footer-container {
    grid-template-columns: 1fr;
  }

  #main-footer .footer-container > *:last-child {
    grid-column: 1;
  }

  #main-footer .footer-container > *:first-child,
  #main-footer .footer-container > *:nth-child(2){
    border-bottom: #444 dotted 1px;
    padding-bottom: 1rem;
  }
}

footer에 border-bottom을 추가해서 구획을 선명하게

 

 

@media(max-width: 600px) {
  /* Stack Grid Items */
  #showcase .showcase-container,
  #home-articles .articles-container,
  #main-footer .footer-container {
    grid-template-columns: 1fr;
  }

  #main-footer .footer-container > *:last-child {
    grid-column: 1;
  }

  #main-footer .footer-container > *:first-child,
  #main-footer .footer-container > *:nth-child(2){
    border-bottom: #444 dotted 1px;
    padding-bottom: 1rem;
  }

  .page-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .page-container > *:first-child {
    grid-row: 1;
  }

  .l-heading {
    font-size: 2rem;
  }
}

about 페이지와 article 페이지도 한 줄로 stack

헤딩 사이즈도 좀 조절