我的网站不适合移动设备并且媒体查询/视口已被覆盖

Question

但是，我对开发网站非常陌生，但是我使用下划线主题为我的公司创建了一个网站-可以找到它，但是我无法使其适合移动设备。可以看到页面的宽度超过手机的宽度。此外，在加载页面时，它似乎是正确且能够运行的，但是在一秒钟后它又恢复为桌面视图。

我已经完成了媒体查询和视口，但是它似乎不起作用/不正确。这是我的网站：https://www.bailiwicklegal.com.au/homepage/

这里是我使用的观点：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这里是媒体查询：

@media only screen and (max-device-width: 750px) {
.internal-container {max-width:100%;padding:0 20px;}
.internal-container 
.circle-container {display:none;}
.internal-container h1 {max-width:100%;}
body.single-post .internal-container img {display:none;}
.narrow-width {max-width:100%;}
header .secondary, header .col-50 {display:none;}
header .col-25 {max-width:100%;padding:0 0 0 20px;}
.logo img {max-width: 100% ; display:block;}
h1.intro {font-size:25px;}
h1.intro, .intro-statement {width:100%;padding:0 20px;}
.circle-container {display:block;margin:0;}
.circle-container h2 {display:block; text-align:center;padding:0;margin: 20px 0;}
.home-circle, .home-circle:before {max-width:100%;height:50vw;}
.home-circle:hover span {display:block;}
.intro-statement {font-size:16px;}
.intro-statement h3 {font-size:24px;}
footer .col-50 {width:100%;padding:20px;}
.news-container span {float:left;}
.news-container .col-50 {line-height:2;padding:10px 20px;}
.news-container h3 {width:100%;}
.col-people img {display:block;float:none;margin:0 20px;}
.col-news {width:100%;}
footer .doyles {float:none;margin:0;display:block;}
.footer-nav {text-align:center !important;}
.copyright 
.bk-overlay {display:none;}
.copyright 
.col-50 {float:none;margin:0;display:block;}
.footer-links {display:none;}
.contact-text {float:none;margin:0;display:block;}
}

如果能帮助我将在桌面视图中看到的两个圆形容器包括到移动视图中，并配置网站的移动版本的宽度，以便使所有内容看起来都整洁，将不胜感激！非常感谢！

Answer 1

查看您添加了容器宽度的网站后，我发现了问题，这就是为什么您的网站无法正常显示。

    .container {
      width: 1100px; // Use percentage width like width:100%; Max-width:1100px
      margin: 0 auto;
      display: block;
      position: relative;
    }