Iphone not picking up media queries, while browser resize is working perfectly

Hey there, I'm currently using a theme called Bones on my WordPress site, but I'm encountering some difficulties with the responsive menu on my iPhone. Oddly enough, when I manually resize the window, the menu seems to work just fine.

Here's the media query I'm currently using:

@media only screen and (min-width: 960px) {

If you want to take a look at the site I'm having trouble with, you can find it here: link

I would greatly appreciate any help or suggestions since I've reached out to the theme developer without any response for several days now.

csswordpressmedia-queries

Answer №1

Are you familiar with the meta viewport element? Make sure to include it in the head section of your HTML document

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

Answer №2

To properly set up media styles for iPhones and smartphones, use the following format:

/* Phones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Add your styles here */
}

/* Phones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Add your styles here */
}

/* Phones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Add your styles here */
}

Answer №3

One problem I encountered was when I uploaded my stylesheet using this method:

<link src="mobile.css" media="only screen and (min-width: 400px)" />

Inside the mobile.css file, I included some styles like this:

@media screen and (min-width: 400px) {
    body {
        background: red;
    }
}

h1 {
    color: blue;
}

Some devices such as iPhone, iPad (with a different breakpoint), and Galaxy Nexus were not displaying the background:red; rule within the "nested" media query, only the styles that were outside of the "inline" media query like h1. Chrome and other browsers did not have any issues with it.

Answer №4

This part caught my attention as unusual:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    ... 
}

In my opinion, it should be

@media only screen and (max-width: 480px), 
@media only screen and (max-device-width: 480px) { 
    ... 
}

or...

@media only screen and (max-width: 480px) and (max-device-width: 480px) { 
    ... 
}

You may also want to consider transitioning from XHTML to HTML5 for your doctype.

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

Search Bar on the Website for Google Search

I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...

htmlcss

Overflow: Truncating text with an ellipsis in the center

Seeking a CSS-only solution for adding an ellipsis in the middle of a string when it exceeds its container. I have tried splitting the container in half, trimming the first half with a wrapper on a whole letter and adding an ellipsis to the front of the s ...

htmlcssoverflowtrimellipsis

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

Alignment of Bootstrap 5 card text and buttons

I've been diving into the BootStrap 5 Crash Course from this YouTube link: https://www.youtube.com/watch?v=4sosXZsdy-s. The final website from the tutorial can be found here: One specific part focuses on using Cards, but I'm facing an issue wher ...

htmlcssbootstrap-5

Regular expression for selecting characters and numbers in jQuery using a selector

Can someone help me figure out how to select all IDs like this: r1 r2 r3 etc. and not the other IDs like helloWorld I attempted using the CSS selector with jQuery but I'm having trouble understanding how. I tried $('#r[0-9]') but it didn& ...

jquerycssregexselector

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

csssvg

Fix the Bootstrap navbar that is obstructing the link to content on the page

Currently, I am implementing Bootstrap 4, with a fixed-top navbar at the top of the screen. Everything works perfectly fine, except for one issue when linking to elements on the same page. When I target an element further down the page from one of the nav ...

cssbootstrap-4

Utilize the entire width for header elements

I have implemented four header elements: home, about, portfolio, and contact. I want these elements to stretch across the entire navigation bar with each taking up 25% of the space. How can I achieve this? Additionally, I specified that the home element sh ...

htmlcss

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

javascriptcsstinymce

Preserving the video's aspect ratio by limiting the width and height to a maximum of 100%

I am trying to integrate a YouTube video using their embed code in a "pop-up". However, I am facing an issue where the video does not resize to fit within the height of its parent. I want it to be constrained by the div#pop-up that contains the video. Curr ...

javascripthtmlcssvideo

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have: <div class="parent"> I should change my color to green when clicked <div class="elem ...

jqueryhtmlcss

Is there a way to switch the cursor to a pointer when hovering over a bar on a ChartJS bar graph?

Here's the chart I created: createChart = function (name, contributions, idArray) { globalIdArray = idArray; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data: { lab ...

javascriptjquerycsschart.js

What is the best way to hide the menu bar on a particular window using electron?

In my application, there is a menu that opens the document properties window when clicked. However, I am facing an issue where the application menu gets inherited by the document properties window itself, allowing you to open another document properties wi ...

javascripthtmlcsselectron

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Is there a way to store a reference of an HTML tag for future use? For instance, if I click on a div and save a pointer to that div in JavaScript, is it possible to serialize this pointer and then de-serialize it to use in another part of the web applicat ...

javascripthtmlcssdomserialization

Adjust the size of the sliding tool with images of varying dimensions

My mobile-first slider features three different types of images: tall, horizontally long, and square. I want the size of the slider to be determined by the horizontally long image and then scale and center the other images to fit its size. To achieve this, ...

javascriptjquerycsssliderresize

Packaging an Angular project without the need for compiling

In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...

cssangularmodulesassangular6

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

cssreactjsmaterial-ui

Design a customizable input field to collect HTML/JS tags

I'm looking to incorporate a similar design element on my website. Can anyone offer me some guidance? Check out the image here ...

javascripthtmlcss

The system is unable to retrieve the value of the property which is set as null

I'm trying to figure out how to store the input value of name_enter into the variable userName. However, every time I attempt this, I encounter the following console error: Uncaught TypeError: Cannot read property 'value' of null function ...

javascripthtmlcss

What is the best way to update image CSS following a rotation using JavaScript?

Discover a neat CSS trick for always centering an image in a div, regardless of its size or aspect ratio. <style> .img_wrap { padding-bottom: 56.25%; width: 100%; position: relative; overflow: hidden; } #imgpreview { display: bl ...

javascriptjqueryhtmlcss