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

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

htmlcss

What techniques can I use to adjust the size of an image through zooming in and out?

In my custom gallery component, the crucial code section looks like this: <Gallery> <Header> <img src={galleryIcon} alt='Galley icon' /> <h1>My Gallery</h1> </Header> ...

javascriptcssreactjstypescript

What is the best way to enhance specific sections of Django content by incorporating <span> tags, while maintaining the original paragraph text format?

I am currently in the process of trying to showcase a paragraph of text (content) from django. However, my aim is to incorporate <span class="modify"> into particular words that match pre-defined words located within a referenceList within the paragr ...

pythonhtmlcssdjangodjango-templates

Tips on creating animations for elements that are triggered when scrolling and become visible

Is there a way to animate an element when it becomes visible on scroll, rather than at a fixed position on the page? I'm currently using code that triggers the animation based on an absolute scroll position, but I'm looking for a more dynamic sol ...

javascripthtmlcssanimationcss-animations

Adjusting the color of text based on the fulfillment of a condition

Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...

phphtmlcss

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

htmlcss

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

javascriptjqueryhtmlcssbutton

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

Issue encountered when concealing page elements followed by revealing them again

My goal is to conceal an id within a page and then reveal it once all the JavaScript has finished loading on the page. The JavaScript I am using to display the content again is: $(document).ready(function() { $("#HomePage")[0].style.visibility = "visib ...

javascriptjqueryhtmlcss

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

javacssjavafxfont-awesome

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

Use a text link to upload a file instead of using an input field

While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...

cssfile-uploadinput

What are some ways to change the appearance of a component using its parent?

In order to make changes to the CSS properties of a Vue component from its parent, effectively overriding any existing styles within the component, I am seeking a solution. Initially, I assumed that styling a component like <my-component> directly f ...

cssvue.jsvue-component

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I still can't figure out what ...

cssangularjsmaterial-designangular-material

The images fail to load on Mozilla browser and appear as blank spaces

My images are only displaying as white in Mozilla but fine on other browsers. I've tried using -moz without success. It's a simple fix that I can't seem to locate. Any help would be appreciated. Just a quick note, the images appear blank wh ...

htmlcssbootstrap-4

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

htmlcss

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

javascripthtmlcssiframe

Setting a fixed height for layout with scroll functionality in Twitter Bootstrap 3.2.0

I am currently working on a design layout using bootstrap 3.2.0. I have managed to create a Fixed header and footer, and I am now facing the challenge of having a full-height container with independent scrollbars. Are there any effective methods in Twitter ...

htmlcsstwitter-bootstrap-3

Incorporate a platform-specific button in a user interface with React Native

I need to display a button that is only shown on iOS, not on android. I have tried using the following style, but it doesn't seem to be working. ...Platform.select({ android: { display:'none', }, The code for my button is: <Bu ...

cssreact-native

The exact problem with aligning the table

Below is a simplified version of my code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body style="font-size: 36px"> </body> </html> <html> ...

htmlcsshtml-table