为什么我的网站在移动设备上看起来像这样？

Question

我目前在MacBook上的显示尺寸为15.4英寸（2880 x 1800），这是我网站的每个部分如何查找我的主页的屏幕截图。

问题1

如何修复我的h3文字，以确保其对移动设备的响应能力。下面是一个截图，下面是它的外观，你可以看到它没有正确调整和适应屏幕。如果您查看帖子底部的我的网站的JSFIDDLE链接，您可以看到我已使用<div class="col-lg-12">确保其响应，因此不知道为什么它会在移动设备上显示。

<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
   <span>I'm a</span>
   <span class="cd-words-wrapper">
   <b class="is-visible">Front-End Web Developer</b>
   <b>Graphic Designer</b>
   </span>
</h3>

以下是我网站的移动设备视图的屏幕截图，显示了该问题。

JSFIDDLE

Answer 1

您需要设置Bootstrap media querys。

@media (min-width: 375px) and (max-width: 414px) {
 .cssClass1{
    margin-left:5px !important;
   }
 }

所以宽度从375到414px的每个设备都将采用这些特殊的CSS类。可以在Safari的响应设计部分中选择不同设备的宽度和高度。 320px是iPhone 5,375是iPhone 6，依此类推。

当设备小于375像素到font size时，请检查JSFiddle我更改了0.5em。请注意，我使用了!important关键字，因为当您不使用关键字时，有时它的类不会适用。自己尝试一下。如果不发表评论，这应该可以解决问题：）