css - 我的网站不适合移动设备，媒体查询/视口(viewport)被覆盖

Question

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

我已经完成了媒体查询和视口(viewport)，但它似乎无法正常工作/不正确。这是我的网站: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;}
}

如果您能帮我将桌面 View 中看到的两个圆形容器包含到移动 View 中，并配置网站移动版本的宽度，使一切看起来整洁，我们将不胜感激!非常感谢!

Answer 1

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

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