CODEWITHSUNDEEP
google-chromeresponsive-designmedia-queriesgoogle-chrome-devtoolsbreakpoints
KatieMCM
KatieMCM

Reputation: 57

Media Queries work when I resize my browser manually, but not when I use the 'Responsive' feature in Chrome's 'Inspection'

I am working on my responsive design. This is what I have for my @media breakpoints:

@media (max-width:800px) and (min-width:400px)  {

  #section {
    padding: 0px;
    padding-top:100px;
  }
  .text {
    text-align: center;
    padding-left: 50px;
    width:350px; 
  }
  .headline{
    height: 50px;
    width: 350px;
    text-align: center;

  }
  .header {
    padding-top: 200px;
    background-color: lightgrey;
  }
  .w-70 {
    width: 20%;
    background-color: blue;
  }
  .w-15 {
    width: 40%;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
.header {
    height:350px;
    background-color: red;
    font-size: 2em;
  }
.w-70 {
    display: none;
  }
  .w-15 {
    width: 40%;
  }
}

When I resize the browser manually to test the responsiveness in chrome everything functions correctly and the breakpoints correspond. When I use the "Responsive" feature in the Chrome Inspection tool to test, the first breakpoint:

@media (max-width:800px) and (min-width:400px)

does not respond. I was taught the the Inspection tool is the more accurate way to test your responsive design so I'm wondering which one I should trust and why one responds and not the other.

I can't seem to see where the problem is in my code and I've tried hard refreshes and restarting chrome to see if it will then work in "Inspection" but both to no avail.

Does anyone know why one is working and the other is not? Which one should I go by? If one works, shouldn't the other work?

Any advice would be helpful: with either my code, or why one testing method is working and not the other. I'm fairly new to coding!

I also have the tag


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

in my head because I read somewhere I should, but to be honest I'm not sure what it does, or if it would have any effect on this problem.

Thanks in advance!!

Upvotes: 2

Views: 1645

Answers (3)

MrBtr
MrBtr

Reputation: 1

I had similar problem. My media rule for tablet screens (>768px) brought between default rules for mobile screen (<768px) and the media rule for desktop one (1120px) (both of which, come to speak of it, worked correctly on their own) resulted in broken responsiveness in Device mode. If I resized the window by simply dragging Dock side, everything worked correctly though. Nothing had helped until I switched on and off Add Device Type option. Hope it would be of any help! UPD After switching it on, change Mobile to Desktop, and now you can turn it off altogether.

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25475

You haven't posted your HTML so it's difficult for us to get a full picture of your issue for viewports 400 - 800px

However, the first thing I would look at is that you have hardcoded the width in pixels for #section, .text and .headline. You also have a pixel width for the padding-left of .text.

Hardcoded pixel widths can be a problem if the element is too wide for its parent.

For example, if the viewport or screen width is 400px, your .w-70 element will be 20% x 400px = 80px wide.

You've also set the width of .text to 350px + 50px padding = 400px.

If you had .text inside .w-70 it will force .w-70 to be 400px wide, not 80px

To quickly check if this be the cause of your problem, change the pixel widths of the elements inside your @media (max-width:800px) and (min-width:400px) { ...} media query to relative widths, eg 100% or 50%

If this still doesn't help, posting your HTML will help us figure it out.

Good luck!

Upvotes: 0

Bonjour123
Bonjour123

Reputation: 1438

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

This works for me (see the minimum-scale=1)

Upvotes: 7

Related Questions