본문 바로가기

Mini Projects

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

헤딩 사이즈도 좀 조절

'Mini Projects' 카테고리의 다른 글

Knowledge Timeline (2) Base CSS  (0) 2020.07.08
Knowledge Timeline (1) HTML  (0) 2020.07.08
News Grid (11) style meta info  (0) 2020.07.06
News Grid (10) Article Page  (0) 2020.07.06
News Grid (9) About Page & Inner Page Grid Container(Utility)  (0) 2020.07.06