github pages:https://rochelwang1205.github.io/sweetie/
github repo:https://github.com/rochelwang1205/sweetie
在手機頁面上,只呈現了三個商品。
這邊用display:none的方式讓後三個商品不見:

.d-padS-none{
    @include padS{
        display: none;
    }
  }
在小螢幕上,將頁碼選單置中:

.pagination {
  display: flex;
  justify-content: right;
  margin: 30px;
  max-width: 940px;
  @include laptopS{
    justify-content: center;
  }
💡分享:近期六角學院分享20份可商用得設計稿(真的太佛了),附上文章連結:https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址),分享給大家~
參考資料:
以上實作僅根據此系列提到的部分進行練習,細節沒有完全符合設計稿。請斟酌參考。