The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices.

The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile to work. I have tried the following:

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

and also this:

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

and finally this:

@media only screen and (max-device-width : 767px)

This is what my meta tag looks like:

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

I tested it on HTC ONE and iPhone 4.

cssmobilemedia-queries

Answer №1

I decided to move the mobile section into its own separate file and used a query in the link tag, which ended up working perfectly.

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="Content/Site.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 767px)" href="Content/mobile.css">

Answer №2

Here's a suggestion:

@media only screen and (max-width: 767px)

While max-device-width is commonly used to target mobile devices like iPhones and Androids, it may not always be interpreted correctly. It might be more reliable to stick with simply using max-width without specifying the device.

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

Creating Visuals from Text with ReactJS/NextJS

Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...

javascripthtmlcssreactjsnext.js

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

htmlcss

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

Unable to adjust the position of the logo image

I cannot figure out how to center the logo over a video background. Any suggestions on what I might be doing wrong? I've tried changing the "position" to relative and absolute, but without any success. #hero video { width:100%; height:100%; p ...

htmlcssbackground

Add CSS styling to input text that is not empty

Is it possible to achieve this using CSS3 alone? var inputs = document.getElementsByTagName("INPUT"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text") { if (inputs[i].value != "") { inputs[i].s ...

css

Aligning a collapsible feature while ensuring that the content descends

My dilemma involves a centered menu with a dropdown feature. The issue arises from the absolute positioning, causing the entire menu to shift upward when the dropdown is activated due to the increased height. I am struggling to find an effective solution ...

css

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

css

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

javascriptjqueryhtmlcss

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

jquerycss

Step-by-step guide on sorting WordPress posts by a custom field date

I've created an event sidebar section that will only show the next 3 upcoming events. I have successfully set up the custom post type and custom fields, but I am struggling to figure out how to order the posts based on the start date of the events, wh ...

phpjavascripthtmlcsswordpress

Tips for vertically centering elements in the header using flexbox

Within the header of my website, I have structured 3 separate divs - one for a logo, one for a search input, and one for a cart link. My goal is to align these 3 .col-md-4 divs in a vertically centered position. While these divs currently have an align-it ...

htmlcssbootstrap-4flexbox

HTML unique flex wrapping

https://i.sstatic.net/ekVr4.png #menu { display: flex; justify-content: space-evenly; align-items: center; margin: 0 5px 0 5px; height: 30px; flex-wrap: wrap; } .menu_item { margin: 0 10px 0 10px; } .menu_item2 { margin: 0 10px 0 10px; } <div id="m ...

htmlcssflexbox

Is it not possible to collapse in webkit?

Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/ If you use the following HTML markup: <div>There should be no gap between us</div> <br /> <div>There should be no gap between us</div> along with ...

csscross-browser

Tips for ensuring an image remains consistently positioned alongside another element

I have a request - In my code, I have multiple h2 headings that I want to display with an image of the Orioles Logo on both sides. There are about 100 of them, and now I need to change all of them to show the Ravens Logo instead. Doing this manually would ...

htmlcss

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image

Choose the element that is trapped within the div

I've hit a roadblock with this issue that I just can't seem to figure out. I was working on a practice project creating a Netflix-like webpage, and the select element in the footer containing languages is stuck and won't budge. Here's m ...

htmlcss

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

javascripthtmlcss

Is it possible to include padding within a textarea element?

Is it possible to add some left margin inside a textarea? I would like there to be some extra space because I am using an image icon as my button within the textarea, and when I type, the words end up covering the image. <div id="inputBox"> < ...

htmlcss

Stop image resizing on bootstrap Card

Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop the image from resizing. <div c ...

cssreactjstwitter-bootstrapbootstrap-4

Replace existing styled-component CSS properties with custom ones

One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...

javascriptcssreactjsstyled-components