【发布时间】：2022-01-11 01:53:08
【问题描述】：
我已经创建了我的在线作品集，它在桌面上运行良好。但是，每当我在其他设备/智能手机上尝试它时，它就不再响应了。我的代码上有元标记，我的 css 上还有一个媒体查询。我正在使用引导程序和外部 css 对其进行编码。另外，我遇到的另一个问题是移动设备上的水平滚动。
附言。删除了一些关于文本的重要信息。
这是我遇到问题的代码。
<div class="container">
<h2 class="text-center p-3">PROJECTS</h2>
<div class="row">
<div class="col-md-7 text-center">
<h5 class="educare">Title</h5>
<p class="text-justify py-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/doodle/48/000000/squarespace.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/html.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/css.png"/>
</p>
</div>
<div class="col-md-1 text-left order-md-last order-sm-first">
<img src="..." class="educ-image">
</div>
</div>
<div class="row">
<img src="./images/venture.gif" class="mr-auto venture-gif">
<div class="col-md-7 text-center">
<h5 class="venture-txt">Venture Capital Funds Website</h5>
<p class="text-justify py-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/windows/32/000000/wix.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-photoshop--v1.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-illustrator.png"/>
</p>
</div>
</div>
</div>
【问题讨论】：
-
到底是什么问题？它在浏览器响应视图中看起来很好，一直到 320 像素宽（iPhone 5）。
标签： css bootstrap-4 flexbox