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

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;
}