0
因此,我的網頁在桌面上看起來很好,但是當我通過任何其他設備(手機,平板電腦)查看頁面上的文本時向下移動到其他內容。有沒有一種方法可以讓文字縮小,就像圖像一樣?如何讓這個圖像響應頁面大小而不移動文本
這裏是我的HTML:
<div class="hero">
<img src="resources/assets/home_header.png" alt="youth futures header"/>
<div class="text">
<h1>Hi</h1>
<p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p>
</div>
</div>
這裏是CSS:
.hero {
width:1280px;
margin:0rem auto;
position: relative;
}
.text {
position: absolute;
top:50%;
left:0;
padding:1rem;
transform:translateY(-50%);
text-align:center !important;
margin: 0px 197px 103px 531px;
}
我不是熟悉媒體查詢,你有沒有例子? – smithky3
添加到我的答案 – Johannes