Certain cellphones fail to recognize media queries

My current project involves working with media queries and I am encountering some issues specifically on Android cellphones.
You can find the URL at:

Ideally, the web page's banner should be centered at the top with gold letters on a black background, while the overall background color should be parchment beige.

The media queries function perfectly on iPod Touch devices in both 'portrait' and 'landscape' orientations, but there seems to be an issue on Safari browser when viewed on Android phones in 'portrait' mode.

Unfortunately, the style sheets defined in the queries do not seem to apply on Android smartphones, regardless of whether it is in portrait or landscape orientation. The root cause of this problem seems related to the meta viewport declaration in the header section.

I would greatly appreciate it if those using cellphones could visit the test page mentioned above and provide feedback on whether the style sheet attributes are correctly displayed in both portrait and landscape views.

I have attempted:

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media="only screen and (max-width: 480px)" type = "text/css"href="mobilestory.css" />
<link rel="stylesheet" media="only screen and (min-width: 481px)" type = "text/css" href="aaastory.css" />

Additionally:

<link rel="stylesheet" media="only screen and (max-width: 480px) and (orientation : landscape)" type = "text/css"href="mobilestory.css" />

And:

<link rel="stylesheet" media="only screen and (max-width: 480px) and (orientation : portrait)" type = "text/css"href="mobilestory.css" />

I have also modified the meta tag to:

<meta name="viewport" content="initial-scale=1">
androidcss

Answer №1

It appears that the styling of your CSS is somewhat distorted.

@media screen an

d (min-width: 481px)
h1 {
border: none;
text-align: center;
font-family: Times New Roman;
line-height: normal;
color: grey;
text-align: right;
text-decoration: none;
font-size: 100%;
font-weight: normal;

Instead of using margin-right: 120px;, consider utilizing text-align: center; and incorporating percentages for margins, among other things. Responsive design could be a solution that will cater to various devices like phones, tablets, or desktops.

The golden color you're trying to achieve isn't displaying on Chrome or Android tab. If there's an issue with this, I would appreciate any assistance in resolving it.

Could you please take a look at the image showing the problem occurring on Samsung Note 2 in landscape mode? Is fixing this particular aspect your priority?

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 a text-filled alphabet design using HTML, CSS, and JavaScript: A step-by-step guide

I have a creative project in mind where I want to design various shapes resembling English alphabets, and each shape should include text. I already have an image file illustrating my idea. My objective is to accomplish this using only html css javascript. ...

javascriptjqueryhtmlcss

Having trouble with loading background images in Angular 4?

After researching extensively on stack overflow, I am still struggling to resolve this issue. The main problem I am facing is related to adding a background image to the header tag in my code. Unfortunately, no matter what I try, the background image refu ...

htmlcssangulartypescriptbackground-image

What are the steps for utilizing a piece of information from one table to retrieve additional data from a separate table in Firebase?

I retrieved a list of data from a table named 'appointment'. Now, I need to extract the data named 'theraid' from this table in order to retrieve the name from another table named 'thera'. However, I am unsure how to accomplis ...

javaandroidfirebasefirebase-realtime-database

Steps to display text within a <TabHost> element in an Android application

Hello, I am encountering an issue with my tab host. I want the text to display when I click on a tab. I have declared the text in the corresponding xml file that the class references. Here is the xml file structure: <?xml version="1.0" encoding="utf-8 ...

androidandroid-emulatorandroid-widgetandroid-layouttextview

The HTTP request encountered an error: Unable to initialize handler within a thread that has not invoked Looper.prepare()

I'm having an issue with posting an HTTP request, so I tried using threads and AsyncTask to avoid the error: Caused by: android.os.NetworkOnMainThreadException However, now I am facing a new error: Can't create handler inside thread that has n ...

javaandroidhttp

Issues with unresponsive links (HTML5/CSS)

As a beginner, I've encountered an issue where my previously working links are no longer functioning. Can anyone help identify what could be going wrong? Below is the HTML code: <!doctype html> <html> <head> <meta charset="UTF-8 ...

csshtml

Finding the best way to allocate resources to apps on Android devices

I am working on developing an Android app using Java that will provide detailed statistics such as battery usage by app, CPU usage by app, memory usage by app, and general device information like battery level, CPU voltage, battery temperature, CPU tempera ...

javaandroidmemorybatteryproc

Remove the default CSS styling from Django CMS

When using Django CMS' text plug-in, I've noticed that the text is hardcoded with its own CSS, specifically within the p tags. Is there a way to remove this default styling? I would like for the text to inherit the styles defined in the theme I a ...

cssdjangodjango-cms

Is it possible to make an asp:Panel extend beyond its boundaries to the right when dynamically incorporating controls into a webpage?

Currently, I am working on a solution to dynamically add controls to an asp:Panel on a website, ensuring that they all remain on the same line. Despite setting a specific width and adding overflow:auto, the controls still wrap to the next line when there i ...

asp.netcssweb

What is the best way to confine the child elements within a parent element using CSS?

Check out my CSS and HTML code here: https://jsfiddle.net/z2cc11yk/ Here's the HTML: <div class="progressbar-container"> <div class="progressbar-text">125%</div> <div class="progressbar-progress" style="background-color: red; wi ...

htmlcss

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

javascripthtmlcssvideohtml5-video

React Native presents a persistent challenge with the absolute positioning of elements

Building a react native application with a divided left and right section. The left side has flex:0.7, while the right side has flex:0.2. In the left section, there's a container with an embedded ImageBackground resembling a circuit framework. http ...

androidcssiosreact-nativetablet

"Create a sleek underline effect for a Bootstrap 4

Can someone please assist me with an issue I'm facing? The underline in my navbar is not working as expected. Here are my HTML and CSS files: https://jsfiddle.net/57fd6yf5/1/ I am trying to make the cursor activate underlining only under the menu item ...

htmlcssbootstrap-4navbar

Tips for accessing the @keyframes selector and extracting the value from it

In my CSS code, I have a shape element with an animation that spins infinitely for 50 seconds. #shape { -webkit-animation: spin 50s infinite linear; } @-webkit-keyframes spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(-360deg ...

javascriptjquerycss

I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

I have created a movie list component with different attributes in the div section to display the cards in a row. However, all the cards are currently aligned in a column. Should I use flex or grid to achieve the desired layout? If so, how can I implement ...

javascriptcssreactjsbootstrap-5flexboxgrid

The font rendering in Safari appears to have distinct differences compared to other web browsers

My concern is related to the HTML tag below: <a href="/partner-team/team" class="button button__style--1">MEHR</a> This is how the CSS appears: a { text-decoration: none; } .button { padding: 0.2rem 4rem; curso ...

htmlcssbrowsercross-browser

Get a list of locations based on their category using the Android Maps API

I have been utilizing the Geocoder feature from the Android maps API in my android studio project to fetch places. While it is functional, it doesn't quite meet my requirements. I am looking to search for locations based on address and specific type s ...

androidjsongoogle-mapsgeolocation

The CSS stylesheets are not compatible with IE7 and IE8

I am encountering an issue with my local site where the CSS links are not being included in the page, particularly in IE7 and IE8. The technologies I am using include WordPress 3.6, Bootstrap 3, Modernizr, and jQuery. Source Code <!DOCTYPE HTML PUBLI ...

htmlcssinternet-explorer-8

Side-Align Your List in HTML

Presenting this image: https://i.sstatic.net/VNF7J.png However, I desire it to be like this: https://i.sstatic.net/ItgEN.png Don't mind the white space, it's just decoration. .server_name { font-size: 50; padding-left: 5; ...

htmlcss

App vanishes from Google Play store following title modification

Having an odd issue with Google Play. Recently, I published a game I created for a class project. Everything went smoothly, and the game was available on the store within an hour. However, yesterday I changed the game's title in the developer consol ...

android