Media Query not working at breakpoints

I am trying to complete my assignment which requires the creation of a responsive web design using media queries for the following ranges of the viewport widths:

  1. (>=992px)
  2. b/w 768px and 991px
  3. <= 767px
    Since we are not allowed to use any layouts or frameworks for the assignment, I cannot use Flexbox, Grid or Bootsrap to achieve the prompted results, and had to rely on traditional methods only.
    The only problem is that the code is responsive to the change in viewport width at ALL points except 767px and 991px.
    Here’s the link to my webpage
    and the associated code.
    I would be greatly obliged to you all if you could please help me out with my predicament.
    Thanks & Regards,


I have checkd your code and there are like two things you should keep in mind when writing CSS code.

  1. The @media must come after all CSS code inside the stylesheet;

  2. When using @media, you always have to specify the devices on which your webpage would be available, as follows: @media all and (max-width: 767px). You have to add all inside every @media query you want to use.

Also, there is a typo inside one of your @media queries:
You wrote it like this

@media (max-width: 767px){
        margin: 20px auto;

You necessarily need a space around the minus sign inside the calc function.

Other than that it works perfectly.

Hope you succeed! Come back with some results.


Thank you so much @Arskeliss for taking time out to go through the code for my assignment and suggesting some very indispensable features that I missed out upon. :grin:
Unfortunately, even upon making the suggested changes, the above mentioned problems still persist at the breakpoints of 767px and 991px.
I have attached below an image of how the problem is presenting itself at those values of the viewport width:

I’m not sure if this problem is persisting only on my system or still visible on others’ systems as well.
Thanks again:v:


I have tried both on Codepen and your Github deployment and I think that the results are good. This is what it looks like on my end.

@media all and (min-width:768px) and (max-width:991px){

don’t do this, but put the media queries in order

you could go bigger to smaller
and put first the code for the biggest screen, and then the two media queries, first for medium then for small, using max-width

you could go smaller to bigger
and put first the code for the smallest screen, and then the two media queries, first for medium then for big, using min-width

1 Like

Thank you for taking out time to reply to my query. : )
I made the suggested changes on my local computer and launched it using the conventional technique of the live server in VSCode, but unfortunately, the breakpoints are still creating trouble as mentioned.
: (

Me pasa igual en mi código.
Al poner 767 no lo coge, pero si pongo 768 o 766 entonces si
Has encontrado ya la solución? Gracias!!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.