The frustration of dealing with CSS media queries

Disclaimer: ** Warning for Beginners **

I'm facing challenges with my media queries for iPhone (in portrait orientation).

These are my current queries:

For larger monitors 

@media only screen and (min-width: 1024px) and (min-height: 861px)

For smaller monitors

@media only screen and (min-width:1024px) and (max-height:860px)

For iPads and smaller windows

@media only screen and (min-width:760px) and (max-width:1023px), screen and (min-device-width: 768px) and (max-device-width: 1024px)

Specifically for iPhones (from 3 onwards)

@media screen and (max-width:759px) and (orientation: portrait), screen and (max-device-width: 767px) and (orientation: portrait)

My iPhone (in landscape orientation) is triggering the iPad and small window query... any advice?

I aim for the iPhone in landscape orientation to use the "iPad" CSS, while in portrait mode it should use the iPhone-specific CSS.

Additionally - when I resize my browser window on my Mac, it displays correctly, but the issue arises with the iPhone - I've tested on an iPhone 5 and a 3S.

ioscssiphone

Answer №1

Here is a helpful code snippet for implementing media queries specifically for IPhone 5:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)

If you wish to cater to portrait orientation as well:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait)

Additionally, for landscape orientation:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape)

Answer №2

Here is a suggestion that has worked for me:

1 - Make sure to include the following tag in your html head:

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

2 - Implement this media query specifically for iPhone Portrait mode:

@media screen and (max-width: 360px) {}

3 - Use this media query to accommodate iPad and iPhone Landscape mode:

@media screen and (max-width: 800px) {}

Answer №3

The magic number to keep in mind is 568 pixels - this seems to be the crucial point where iPhones reach their maximum device width, regardless of the specific model.

What I discovered was that my threshold was set at 768 pixels...

Here are the final queries I ended up with for iPhone portrait mode:

screen and (max-device-width: 568px) and (orientation:portrait)

And for everything else within these parameters as mentioned earlier:

screen and (min-device-width: 569px), (max-device-width: 568px) and (orientation:landscape)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to customize the color of radio buttons in JFXRadioButton using CSS

I am facing an issue with customizing the styling of JFXRadioButton component from this library : jfoenix.com I want to modify the color of the circle, but the default class is not working. Are there any suggestions or solutions available? (The colors me ...

cssjavafx

Registration process for new users

My app invites users to join via email, but the current process is a bit cumbersome. The link in the email opens a web browser where the user sets their password, then they have to install the app, open it, and log in with their email and password. I&apos ...

androidiosmobile

Interactive Map Using HTML5, CSS, and JQuery

As someone venturing into the world of web front end development, I am curious about the process of mapping an image so that specific functions can be triggered by pressing different parts. In this case, the shapes will be irregular (such as a map of Europ ...

jqueryhtmlimagecssmapping

The conditional CSS appears to be malfunctioning

Hi, I am attempting to use conditional CSS in my stylesheet to set a different width for IE6. I have tried the following code but it is not working: div.box { width: 400px; [if IE 6] width: 600px; padding: 0 100px; } How can I su ...

htmlcss

Organizing your thoughts: Utilizing Etherpad-Lite's list

Looking to stylize the list items with decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman for each of the first five levels? I attempted to achieve this by adding CSS in my pad.css file. .list-number1 li:before { content: counter(first)") " ...

cssetherpad

The React-bootstrap components lack predefined styles

I have been working on a web application using react.js, react-router, and webpack. I wanted to style it using react-bootstrap for the navbar, but it seems that my navbar is not getting styled properly as shown in the documentation here Here is the react- ...

csstwitter-bootstrapreactjswebpackreact-bootstrap

Center alignment is not being applied to the SVG element

I am currently working with React and when my component renders, it displays an SVG inside a div. Here is a snippet of the code: render() { return( <div class="myClass"> <svg> ... </svg> </div> ); ...

htmlcssreactjssvg

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...

javascriptjqueryhtmlcss

Having trouble with HTML - JavaScript function not processing responseText?

On my website, there is a button array that displays the position of a robot by reading a text file using a php/ajax combo. The script initially sets all buttons to the same color and changes the color of the button to represent the robot's position. ...

javascripthtmlcss

What keeps a UICollectionViewCell in place?

One of my unique challenges involves dealing with a custom UICollectionViewCell. Upon returning it from the UICollectionView's datasource method, I often find myself wondering: what exactly retains this particular object? ...

iosobjective-cuicollectionviewuicollectionviewcell

Using FB Messenger iOS to verify a third-party app

I am in the process of creating a web application that features Facebook authentication and the capability to invite friends through Facebook. While working on this project, I encountered a specific issue that is quite frustrating and I am hoping someone o ...

javascriptiosfacebookreactjswebview

"There seems to be an error with the texture in the iOS OpenGL ES sample, but it works fine on Android when using

Using the stb_image library to load textures is a common practice in rendering: stbi_set_flip_vertically_on_load(true); GLuint textureID; glGenTextures(1, &textureID); int width, height, nrComponents; unsigned char *data = stbi_load(path, &width, & ...

iosgraphicsopengl-esrendering

Exploring the Height Settings in Bootstrap

After reviewing this code, I stumbled upon an element that has left me puzzled. To gain a better understanding, you can view a live preview of this website. My inquiry pertains to the height setting of the "Download" section (the vibrant yellow one). I me ...

htmlcsstwitter-bootstrap-3

CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

Hey there, I've run into a bit of an issue with two divs containing tables - one acting as a header and the other as a scrollable content area. Everything is working perfectly except for this mysterious border/margin that keeps appearing in Chrome on ...

htmlcssgoogle-chrome

Show the user's input within a clickable button

I'm trying to create a functionality where I have an input field and a button next to it. When I type something in the input field and click on the button, I want the result to be displayed in another button. Here is what I have attempted so far: f ...

javascripthtmlcss

When setting a long press to reduce by 1 in Swift, the number unexpectedly decreases by two instead

So, my long press gesture recognizer is set up like this: @IBAction func reduceP1S1ScoreOnLongPress(_ sender: AnyObject) { p1s1currentscore -= 1 p1s1scoreoutlet.setTitle(String(p1s1currentscore), for: UIControlState.normal) } Howe ...

iosswift

What could be the reason my CSS and Javascript animation is not functioning properly?

Currently working on creating a dynamic animation menu using CSS and Javascript, but encountering some issues. The concept involves having a menu with initially hidden opacity (using CSS), which becomes visible when the hamburger menu is clicked, sliding i ...

javascripthtmlcsstailwind-css

Conceal the HTML input element until the JavaScript has finished loading

Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...

javascripthtmlcssfile-io

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

javascriptcssinternet-explorerfirefoxcross-browser

Using TouchableHighlight within a Viewpager component in a React Native iOS app to trigger a page-change event when

In our application, we have implemented the use of a view pager component called react-native-community/react-native-viewpager. Each page consists of 3 sections that are all clickable. To enable this functionality, we are utilizing the TouchableHighlight c ...

iosreact-nativetouchablehighlight