Skip to main content
Inspiring
October 19, 2025
Answered

Odd media query behavior

  • October 19, 2025
  • 1 reply
  • 226 views

ALL of my media queries on my portfolio site work magnificantally when viewed on a desktop or laptop. However, one of its pages won't adjust when viewed on a moble device, while the rest will. Is there a logical reason for this? If yes, how should I go about fixing it?

 

Matthew

Correct answer Nancy OShea

URL:  https://matthewjablonski.com/my-composition.html

Code Errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fmatthewjablonski.com%2Fmy-composition.html

 

MISSING VIEWPORT META TAG. 

It's present on your index.html page, but not on my-composition.html page.

 

Add this line of code to your <head> tag.

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

 

Hope that helps.

 

1 reply

Nancy OShea
Community Expert
Community Expert
October 19, 2025

Answers to layout questions are contained in your code. 

What's the URL to the problem page online?

Also, on which devices are the media queries breaking? Is it happening in all mobile devices or just certain ones?

 

 

Nancy O'Shea— Product User & Community Expert
Inspiring
October 21, 2025

matthewjablonski.com

 

Please navigate to my "illustration-menu," then click on "my-composition" (at the very bottom).

 

To add the "my-composition" page,  thus far, I simply dubplicated my index page. The Index page never has had any issues. Before, I started editing elements (at all), I published it, I discovered the problem.

 

As shown here on Image #1, the break point is at 768px. I've seen it break successfully on my desktop and laptop, but not on either my or someone else's phones.

 

Matthew

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
October 21, 2025

URL:  https://matthewjablonski.com/my-composition.html

Code Errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fmatthewjablonski.com%2Fmy-composition.html

 

MISSING VIEWPORT META TAG. 

It's present on your index.html page, but not on my-composition.html page.

 

Add this line of code to your <head> tag.

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

 

Hope that helps.

 

Nancy O'Shea— Product User & Community Expert