移动视图 - 图像调整大小和下面的重叠部分

Question

Codepen - https://codepen.io/spaOyst_/pen/bGWagKG

我正在尝试通过移动设备优先来重建网站，但我认为图像 responsiveness/resizing 或其他部分在浏览器宽度增加时未调整大小，但我正在努力解决这些问题，但图像变得很大并与下面的部分重叠。

我试过调整图片的宽度和高度、锚标签和图片下方的部分

如果有人知道原因是什么，我将不胜感激。

Answer 1

在您的 CSS 的第 246 行，您已将灯箱部分的高度设置为 700 像素，此非响应高度导致视口宽度约为 490 - 760 像素时出现问题。

我不清楚为什么你甚至需要看到这个灯箱部分的高度，但如果有必要，添加一个额外的断点怎么样？

@media (max-width: 490px) {
  .lightbox-section {
        height: 700px;
    }
}  



@media (max-width: 760px) {  
 ...  

   .lightbox-section {
        padding: 63px 10px;
       /* height: 700px; */ Either comment this out or adjust as needed
        text-align: center;
    }
   ...

   }

https://codepen.io/panchroma/pen/QWvaMEd

我看到您也为索引服务部分设置了像素高度，但是图像链接已损坏，所以我看不到该部分是否也存在问题。

移动视图 - 图像调整大小和下面的重叠部分

Mobile view - images resize and overlap section below

html

css

responsive-design