---
tags: 網頁切版直播班 - 2021 夏季班
---

# 7/26 線上 Slack 助教

## 今日助教輪班時間

焦糖：7/26 (一)
回覆時間：下午 2:00 -下午 6:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題
1. Alicia Lo：
焦糖助教您好 : 這是我的Github-repo 和 Github-pages 連結。我在做第三週 RWD作業碰到有關X軸出現的問題，在/css/_base.scss 檔裡面我有設了992px 和 767px 兩個斷點，我希望在這兩個斷點以下，container裡的內容與container間距離padding 15px (如附圖)。用瀏覽器直接拉伸的結果雖然有符合我的預期，但是改以chrome的瀏覽器工具檢視卻出現了X軸 (詳情如影片所示 https://www.youtube.com/watch?v=T5QwLTsFzjU)。試了滿久不太確定問題出在哪裡，因此前來詢問助教，再麻煩助教解惑了，謝謝助教><!

> 助教有檢查過你的 .container 是沒有問題的唷，寫得很棒！畫面上的切換也沒有問題如[圖片](https://imgur.com/a/YcDV1fl)。這算是 Chrome 瀏覽器工具在切換時的一個 bug (其實我自己也碰過這個問題) 建議可以重新整理並重複多點幾次 toggle device toolbar 就可以了。若還是沒有辦法正確顯示，可以在 Slack 上敲我來協助你。

---

2. 蔡明達：
我在做第三週 RWD 太陽眼鏡的頁面碰到有關破版出現的問題，在螢幕解析度 320px 的情況下字會超出 li 的區塊中，li 區塊內把左右推的寬度拿掉，還是會有超出區塊的問題產生，麻煩助教解惑，謝謝助教

>這裡可以調整 .productSun_head .category li a 的字體大小來解決，如[圖片](https://imgur.com/a/wFHoPx7)。我是把字體大小調整為 font-size: 12px 並且移除 .productSun_head 左右的 padding，盡量想辦法騰出空間來。另外要記得調整 border-right 的線條唷 ~

---

3. kevinhes：
焦糖助教您好
這是我的 Gitpage & Gitrepo
我想要請問一下，在設計有卡片的頁面，比如說產品頁面的時候，之前我嘗試在卡片上使用width: x%來設計，但是內部的圖片卻沒有辦法依照變動的％數來調整，後來我的做法都是固定卡片的 width ，但是如果這樣設計的話在 解析度 1024 的部分卡片跟卡片中的 間隔 就會不好看，請問是要再多加斷點？還是改回％數設計

> 這裡會比較適合用 % 數來設定，可以把 .recommend-item 的寬度更改為 width: 25% 並把 flex-wrap: wrap 移除，最後加上 margin: 0 15px; 來與左右產生距離。重點在於 .recommend-item img 的 width: inherit; 要移除(重要!!!!)，接著在 1024px 顯示下可以跟[圖片](https://imgur.com/a/ZMzXnms)中的一樣了。
再麻煩你試試看唷 ~ 有問題歡迎在跟我說。

---

4. Fred Chang：
焦糖助教您好, 這是我的Repo、Pages
總共四個問題想請教:

1.在聯名設計鏡框區塊左邊的字會斷行，雖然後來加上 white-space: nowrap; 解決了，但還是不太了解一開始字會掉下去的原因。(_index.scss第182行)

2.顧客推薦區塊在pad的尺寸下，只要我li寬度給超過47%，下面留言區就會明顯超出圖片，但已有設定max-width:100%; 不曉得原因為何。 (_index.scss第215、228行)

3.如果將banner高度改為height: calc(100vh-109px);背景圖無法正確顯示，但如果只給100vh不扣掉header高度卻能顯示，不曉得是哪邊做錯了。(_index.scss第2行)

4.想請問logo的相對路徑該如何設定才能正確抓到圖片，因使用url("../../images/logo.png");無法正確讀取，所以目前先改為絕對路徑 (layout/_header.scss第18行) 抱歉問題有點多。

>1.這裡是因為寬度不足所造成的( 因為你有用 left: 50% 去產生推擠，導致文字寬度不夠會自動換行是正常的 )，你可以試著把 .co-branding-products li h3 的 left: 50% 給移除看看，會發現文字是沒有換行的唷。

>2.助教先把 .recommendation .feedback li 的 width 修改為 48% 如[圖片](https://imgur.com/a/I0VdiGB)。會發現其實不是留言區超過圖片，而是圖片沒有占滿外層的空間。這與你 img 標籤設定的 max-width: 100% 有關係，因為 max-width 指的是圖片的最大寬度，可以調整成 width: 100% 就可以解決囉！[如圖](https://imgur.com/a/NBos7Cg)。

>3.height: calc(100vh-109px); 要修改為 height: calc(100vh - 109px) 這樣子才是正確的唷，要注意空格的問題。

>4.路徑位置錯了唷 ~ 正確是 (../images/logo.png) 這樣才對。

---

5. 童筱涵：
焦糖助教你好，這是我第三週的作業，
https://codepen.io/hsiaohan/pen/BaRJmPX?editors=1100 在 section service(code pen第19行的地方，css在418行開始），當我縮小到767px以下時padding-bottom會跟最後一個li最下面文字重疊，但pc跟992px的時候不會，想請問原因為何

> 因為預設的 align-items: stretch; 會讓元素等高，而內層 100% 會讓內容元素自己被撐高，但 wrap 時，因為第一層變成內容高了，所以會重疊。像是這個[範例](https://codepen.io/TzuHui/pen/yLbpvQd)。因此只要在 ul 標籤上加上 align-items: baseline 就可以囉 ~

---

6. ZengZeng：
焦糖助教你好，這是我第三週作業header部分的Codepen～
我原本預期當我縮放到375px以下時，header上的logo圖片會跟著縮小，但卻直接被裁切成-->我css第67~70行設定的大小，請問要如何讓logo圖片自適應縮小呢><
還請助教解惑

> 可以加上 background-size: cover; 就可以自適應囉。

---

7. zyc：
焦糖助教您好 : 這是我的 Github-repo 和 GH-pages 連結。
第三週 RWD 首頁部分目前碰到3個問題：
1）mobile 斷點以下 的 nav 破版，裡面的 li 會超出紅色範圍（在加入 .hero 及background-img 之前是正常的）
2）mobile 斷點的 footer，如何讓 .social 的 icon 和 .contact 的資訊並排？
3）mobile 斷點的 h1 和 h3 為什麼 font-size/ line-height 都沒有改變？（已檢查 dist / all.css 是有出現樣式設定的）
再麻煩助教解惑，感謝

>1. 原因是 .topNav 裡面的 height 造成的，這裡移除掉就沒問題囉 ~ 若要推擠空間可以利用 padding 或是 margin 唷。
>2. .social 的 icon 若要和 .contact的資訊並排的話，一定要加在 .contact 裡面，共同使用一個容器唷。
>3. 首先這裡有個問題要先修正，在 _mixin.scss 裡面若是寫完內容，一定要習慣在右括號加上分號，[如圖](https://imgur.com/a/2sYm2T5)。另外會改不過去的原因是因為 .hero .hero-content h3 的權重比 .hero-content h3 還要高唷，因此不論如何修改都是吃到 .hero .hero-content h3 裡面的 CSS。

---

8. Oober：
焦糖助教你好，這是我的codepen 我在html 129行 ul class='brand-list' 那有設置display:flex 及 justify-content:space-between 但是顯示出來並沒有出現推開的效果
再麻煩助教一下了 謝謝

>因為你有在外層加上 .container 的關係，導致裡面圖片的占滿整個區塊了，所以自然 justify-content: space-between; 看起來不會有效果，[如圖](https://imgur.com/a/45i05aJ)。這裡可以使用 margin 去推擠就好。

---

9. kevinhes：
焦糖助教您好
已經依照助教的建議試著調整
這是我的 Gitpage & Gitrepo
我這邊想要再詢問一下
我當初固定卡片的寬度跟在圖片上面使用 width : inherit 是因為在 992px 的斷點下 圖面會無法填滿 card 元件 我想說每個 斷點 都固定卡片寬度，然後讓圖片繼承父層圖面不會跑掉，如果依照％數的設定的話 要如何在 992 斷點照片依舊跟著卡片走呢？
再煩請指教，謝謝

> 可以在 .recommend-item img 直接下 width: 100% 就可以隨著外層的 li 寬度來自適應囉，如[圖片](https://imgur.com/a/K4t4Ofj)。

9. yellamoon：
焦糖助教您好
這是我的 Gitpage & Gitrepo
我這邊想要再詢問一下
我發現我的觀念有些卡住，目前會慣性先抄別人的code再分析，現在學到有力不從心，一種不知道該怎麼辦的感覺。
再煩請指教，謝謝
https://github.com/kolyfish/week4maintask/tree/main/app
https://github.com/kolyfish/week4maintask