我想要將我的網頁，響應式化，我有加上 <meta name="viewport" content="width=device-width, initial-scale=0.5">
但仍然沒有作用，而且頁面整個縮排，希望有大大能夠幫我解惑，謝謝
以下網址為html及css，有點冗長，請見諒!
https://87jojo.github.io/Adopt-Dog-site/
https://github.com/87JoJo/Adopt-Dog-site
狀況圖: 右邊整個空白，已加上col-md-4，但仍無作用，右半部整個空白
正常網頁圖:
已邀請的邦友 {{ invite_list.length }}/5
其實這要找你的問題有點難了。
因為我發現你的css內用了很多 width+px設定
正常來說要做rwd。就盡量不要用width+px設定來規範。
建議你先開f12 debug除錯器後。
從最上層一層一層的將元件慢慢放進去找原因。
畢竟你現在的css我覺得有點雜。要整理一下才行。
免得互相干擾。
當然，如果真的不懂的話。善用 bootstrap 也是一種方式的。
bootstrap現在推薦的，用RWD是要加沒錯，但你的問題跟他沒關係
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
@media (max-width:1200px){
.responsive_image {
display: none;
}
}
.header-top {
height: auto !important;
}
.header-bottom {
height: auto !important;
}
.header-bg-img {
}
.header-bg-image {
width: auto !important;
}
</style>
<!doctype html>
<!-- lang代表網頁主要語言,如果有設對於搜尋引擎是友善的,對於瀏覽器在判斷是有幫助的 -->
<html lang="zh-Hant-TW">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- 讓網頁響應式(RWD)設置生效 -->
<!-- <meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://87jojo.github.io/Adopt-Dog-site/bootstrap.min.css">
<link rel="stylesheet" href="https://87jojo.github.io/Adopt-Dog-site/index.css">
<!-- fontAwesome icon css -->
<link rel="stylesheet" href="https://87jojo.github.io/Adopt-Dog-site/original/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- 導覽列 -->
<div class="container-fluid">
<header class="header">
<div class="container">
<div class="header-area">
<div class="header-top">
<div class="nav-bar">
<ul>
<li>
<a href="https://87jojo.github.io/Adopt-Dog-site/about.html">關於領養寵物</a>
</li>
<li>
<a href="https://87jojo.github.io/Adopt-Dog-site/adopt.html">搜尋寵物</a>
</li>
<li>
<a href="#">關於我們</a>
</li>
<li>
<a href="#">領養案例</a>
</li>
<li class="login">
<a href="#">
<i class="fa fa-unlock-alt"></i>
登入</a>
</li>
<li>
<a href="#">
<i class="fa fa-user"></i>
註冊</a>
</li>
</ul>
</div>
</div>
<div class="header-bottom">
<div class="row">
<div class="logo">
<img src="https://87jojo.github.io/Adopt-Dog-site/img/logo.png" alt="" class="img-fluid">
Pet Lover.
</div>
</div>
<div class="header-bottom-search row">
<div class="col-4 col-md-3">
<h3>尋找你的好夥伴!</h3>
</div>
<div class="col-8 col-md-6">
<div class="nav-item">
<div class="nav-item dropdown" style="margin-right: 10px;">
<i class="fa fa-paw"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
data-toggle="dropdown">
我正在尋找...
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">貓</a>
<a class="dropdown-item" href="#">狗</a>
<a class="dropdown-item" href="#">其他</a>
</div>
</div>
</div>
<div class="nav-item">
<div class="nav-item dropdown">
<i class="fa fa-location-arrow"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
data-toggle="dropdown">
我所在的區域
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">北區</a>
<a class="dropdown-item" href="#">中區</a>
<a class="dropdown-item" href="#">南區</a>
<a class="dropdown-item" href="#">東區</a>
</div>
</div>
</div>
<a class="search-button">
<p>確定</p>
</a>
</div>
</div>
<div class="col-3 responsive_image">
<div class="header-bg-img">
<h3>快來領養我~</h3>
<img class="header-bg-image" src="https://87jojo.github.io/Adopt-Dog-site/img/flea-treatment-dogs_full_width.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</header>
跟你一開始的有一點不太一樣。
你的寫法架構會有困難的原因在於沒有把上、下的位置分好，Logo 跟右邊的圖片在網頁縮起來的時候會跟其它東西打架。
其實 bootstrap 的跟 table 的概念一樣，但是上下左右要先決定縮小了，東西才知道位置要去哪。
iThome鐵人賽
看影片追技術