CODEWITHSUNDEEP
javascripthtmlcssmedia-queries
Jerrod
Jerrod

Reputation: 125

Media Query breakpoint not working due to webpage being 15px shorter than screen

Basically, my media queries are firing off 15px lower than they should for example: 

@media only screen and (max-width : 1200px) {
  .title{
    color: blue;
  }

}

The css above should change a h1 to blue once the web page width gets to 1200px or lower, instead, it fires off at 1185px. I've tried other breakpoints, it's 15px consistently. I see the webpage width by using the inspect tool, and seeing the width of the body element, but I've also used "console.log($(window).width())", same answer. However, with the inspect tool open, if I re-size my window, it shows the "width x height" in the top right corner in pixels. That measurement is accurate, once that hits 1200px or lower, my query activates, it's exactly 15px wider than what my "body" width is showing. Can anyone help me figure this out?

I've already added the line below, the zoom is at 100%, and i'm also using chrome. any suggestions? I included the html up to the section with the .title h1 tag in it, let me know if ya'll need to see anything else. I know that no other css is getting the way, and the media queries are at the bottom of my css files.

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

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mobius Designs - Architecture Firm</title>
    <meta name="description" content="An artichture firm based out of Dallas, TX with years of experience creating stunning buildings and structures.">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/ico" href="static/images/architecture_favicon.ico">

    <!-- STYLESHEETS BELOW -->
    <link rel="stylesheet" href="static/css/home_section.css">
    <link rel="stylesheet" href="static/css/project_section.css">
    <link rel="stylesheet" href="static/css/contact_section.css">
    <link rel="stylesheet" href="static/css/fontello.css">

    <!-- JQUERY SCRIPTS BELOW -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/jquery_scripts.min.js"></script>
  </head>



  <body id="top">


    <main>
      <!-- Start of the HOME section or the top of the page -->
      <div class="title-row">
        <h1 class="title">World Class Architecture Firm</h1>
        <p class="title-description">Based out of Dallas, TX, Mosbius Designs is an architecture firm with over 10 years of experience designing groundbreaking buildings. From commercial, business, to personal, we pride ourselves on creating state if the art buildings and exceeding expectations. If you are a business or individual in need of architectural services, you can get in touch with our company <a href="#contact"><b>here</b></a>.</p>
        <h3 class="looking-to-hire title-links"><a href="#contact">I'm Looking to Hire </a><span class="chevron"> > </span> </h3>
        <button  class="need-building title-links" type="button"> I Need a Building<span class="chevron"> > </span> </button>
        <p class="note"><small>*This website is merely an example, Mosbius Designs, all building names and locations are fictional. Any resemblence to real life locations or organizations is merely coincidence </small></p>

        <form class="building-form" action="process_building_form.php" method="post">
          <div class="building-form-inputs">
            <input type="text" name="name" placeholder="Name" required>
            <input type="email" name="email" placeholder="Email">
            <input type="text" name="phone" placeholder="Phone">
          </div>
          <textarea name="message" rows="8" placeholder="General Idea of Building or Message to Architecture Firm" required></textarea>
          <input type="submit" name="" value="Submit">
        </form>
      </div>

Upvotes: 3

Views: 766

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

Your code is working correctly. What's wrong is that you are confusing the screen width and viewport width.

The value you are seeing when you use console.log($(window).width()) is the width of the viewport - this is the width of the screen without the scrollbar. This is also the maximum width that your <body> element can be (assuming its 100% wide) - otherwise if it was the full width of the screen, the right-most 15px would be hidden under the scrollbar.

If you want to check the screen width, i.e. including the scrollbar, use $(window).outerWidth(), i.e.:

console.log("Screen Width:"+$(window).outerWidth());
console.log("Viewport Width:"+$(window).innerWidth());

Upvotes: 2

Related Questions