Why is width: 100% not working for my responsive design?

Question

I create my portfolio, and I stumbled upon an error that I cannot solve for responsive design. Using the Chrome developer tool, I see that my width: 1000% is crossed out when the screen width is less than or equal to 1200px;

Look at the image, the red frame is just there to make sure that the media request really works, I easily deprived my code, but below I consider it relative.

Header image

We see that the width is crossed out, and I still have vertical scrolling.

HTML code:

<header> <nav> <div class="row"> <img class="logo" src="../img/logo.svg" alt="asheem logo"> <ul class="main-nav"> <li><a href="#">Current Projects</a></li> <li><a href="#">Previous Projects</a></li> <li><a href="#">Contact me!</a></li> </ul> </div> </nav> <div class="hero-text-box"> <h1>Asheem Chhetri</h1> <a class="btn btn-full" href="#">Projects</a> <a class="btn btn-ghost" href="#">Show me more</a> </div> </header> 

CSS code:

 *{ margin: 0; padding: 0; box-sizing: border-box; } html{ background-color: #fff; color: #6d6d6d; font-family: 'Exo', sans-serif; font-size: 20px; font-weight: 300; text-rendering: optimizeLegibility; } .clearfix{ zoom: 1; } .clearfix:after{ content: '.'; clear: both; display: block; height: 0; visibility: hidden; } /*------------------------------------------------ Reusable components ------------------------------------------------*/ .row{ max-width: 1140px; margin: 0 auto; } .box{ padding: 1%; } section{ padding: 80px 0; /* height: 100vh;This solved the page flow problem for now. */ } /*------------------------------------------------ Header ------------------------------------------------*/ header{ background-image: url(../img/imageForMain2.jpg); background-size: cover; background-position: center; position: relative; background-attachment: fixed; height: 100vh; } h1, h2, h3, h4{ /* text-align: center;*/ font-weight: 300; text-transform: uppercase; letter-spacing: 2px; } h1{ margin-top: 0; margin-bottom: 20px; color: white; font-size: 200%; word-spacing: 4px; } .hero-text-box{ position: absolute; width: 1140px; top: 20%; left: 50%; -webkit-transform: translate(-50%, -20%); transform: translate(-50%, -20%); } 

Media Request Code:

 /*------------------------------------------ Big tablets to 1200px(width smaller than 1140px) -------------------------------------------*/ @media only screen and (max-width: 1200px){ .hero-text-box{ width: auto; padding: 0 2%; border: 1px solid red; } .row{ padding: 0 2%; } } 

PS: I already have this in my head:

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

So, I clearly don’t understand why I get a vertical scroll? and overflow when the screen size is about 1200 pixels? Thanks for the help!

Answer 1

The main reason that your width does not respond is that you use px (pixels), pixels can be very useful when you make a specific size / width, Use, percentage for your width instead of pixel, it will solve your problem.

as for your media query, use percentage too. set the minimum width () for tablets and another media request for iphone, nexus, etc. The reasons for this, because sometimes the percentage does not solve all the problems .. you may encounter some layout error along the way, but solve this problem when you are faced with what is simple,

When the screen size is small, use pixels. Not a percentage. but it depends on how you use it.
In general, to solve your main problem. Use percentage. Hope this helps :)
Greetings