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

Question

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

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

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

My Website is not Mobile Friendly and Media Querie / Viewport is getting overridden

css

mobile

viewport

media-queries

responsive