Responsive for Specific Devices

HTML-CSS
1

I have been working on the Firefox ‘Responsive Design Mode’ and my portfolio website is now fully responsive for the most part. But I am now checking specific devices and everything stays the same except the text and image in the welcome-section. For something like the ‘iPhone 11 Pro iOS 14.6’, should I create a media query for that specfic width and height then just move things slightly up? In that case I would be working in:

/* iPhone 11 Pro iOS 14.6 */

@media (max-width: 414) and (max-height: 896) { 

}

Should I make these slight adjustments for every device or only the necessary ones?

3

This is wrong, I figured out for specific devices you are supposed to use width and height instead of max-width and max-height.

My only question now is should I make my portfolio website responsive for every single device shown on Firefox DevTools? Shouldn’t you want your website to be responsive on every device OR should you only choose the 10 most used devices? I’m curious to hear what people think because I am new to all of this.