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

Question

I am quite new to developing a website, however, using the underscores theme I have made a website for my company - it works find but I am not able to make it mobile-friendly. This can be seen with the width of the page going over the width of my phone. Furthermore, when loading the page it seems to be correct and able but after a second it reverts back to the desktop view.

I've done a media querie and viewport however it seems to not be working / incorrect. Here is my website: https://www.bailiwicklegal.com.au/homepage/

Here is the viewpoint I am using:

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

and here is the media querie:

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

It would be greatly appreciated if you can help me include the two circle-containers which are seen on the desktop view into the mobile view as well as configure the width of the mobile version of the website so everything looks neat! Thank you very much!

Answer 1

I have found issue after review your website you add container width that's why your site not showing properly.

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