CSS media queries going unnoticed

I'm struggling to make my page look nice on both iphone4 and iphone 5. Despite writing some media queries, they don't seem to be taking effect:

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

#gpsMain{
    position:absolute;
    top:25px;
    left:20%;
}

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

#gpsMain{
    position:absolute;
    top:11px;
    left:20%;
}

}

Why aren't the styles being applied? Is this the correct approach for targeting the resolutions of these two iphone models?

(These queries are the last things I added to the CSS document)

cssmedia-queries

Answer №1

Make sure to verify if a viewport is properly set in your code. It's worth noting that media queries are typically structured like this:

@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

@media screen and (max-width: 400px) {
    .list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; }
}

This snippet is taken from a Wordpress theme dating back to 2014. For an accurate preview of how things appear, consider using .

Answer №2

Here's a different way to switch it up:

@media screen and (max-device-width: 600px) {

#gpsMain{
    position:absolute;
    top:50px;
    left:30%;
}

}

@media screen and (max-device-width: 400px) {

#gpsMain{
    position:absolute;
    top:15px;
    left:25%;
}

}

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

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

htmlcss

Guide to applying Bootstrap styles to a specific section of an HTML document

What can I do to ensure that the Bootstrap library used by the main app does not affect the styling of my controls when integrating my web application inside the main app? I want to maintain the current styles of my controls without any interference from ...

htmlcsstwitter-bootstrap

Pause the event listener temporarily and reattach it after specific actions have been completed

I am currently working on a React app that includes a scrollable div. Here is an example: <main id="main" onScroll={this.handleScroll}> My question is, how can I temporarily remove the onScroll event listener from the main element and then reattach ...

javascriptjquerycssreactjs

Abstract forms on the canvas are dancing in a strange and unusual rhythm

As a beginner in web design, I've made progress but still have questions. Can someone help explain this to me? Here is how a specific section on my website is set up: https://i.sstatic.net/8ntpR.png I'm working on splitting the screen with 40% ...

htmlcss

Overriding custom CSS with react-bootstrap styles

While attempting to utilize the react-bootstraps accordion component, I encountered the necessity of the import statement import "bootstrap/dist/css/bootstrap.min.css"; in order for the accordion to function properly. However, upon adding this ...

cssreactjsreact-bootstrapbootstrap-5

Is it possible to update the page title with JQuery or JavaScript?

Is it possible to modify the page title using a tag inside the body of the document with jQuery or JavaScript? ...

javascriptjqueryhtmlcssdom

organize divs in a nested angular style

Looking to showcase div elements in a specific layout within my Angular project: https://i.sstatic.net/RH0lF.png The current HTML structure is as follows: <div class="outer-wrapper"> <div class="image" ng-repeat="image in images" ng-if="sho ...

htmlcssangularjs

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...

cssxpagesxpages-extlib

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

Spin the text within a div by 90 degrees and align it to the right side

I have been attempting to create an information box that contains a simple info text div. On the right side of this info box, I want to include a text labeled "more info" within a nested div to signify that the info box is interactive. To save space, I wou ...

css

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

Create a sleek design by aligning labels with CSS 3 fancy radio buttons

I have a radio button with a larger circle that needs to be 38px input[type=radio] { visibility: hidden; } .label { font-weight: normal; color: #333; } .label::before { content: ''; position: absolute; left: 0; w ...

htmlcss

Non-Modal functionalities, an alert displayed prominently in a vibrant red bar at the top of the screen

Is there a way to make the text show up at the top of the webpage in a red banner when the button is clicked? I've searched on Google and YouTube but haven't found a solution. Could someone please take a look at my code to help me figure this out ...

javascripthtmlcssalert

Create a series of vertical lines using jQuery

I'm dealing with a JSON data set that I want to use to generate a grid. In addition to the grid, I also need to display vertical lines above it based on certain values: var arr = []; arr= [ {"Measure":"Air Pollution","Rank":"1","Value":"15.5"}, ...

javascriptjquerycsskendo-ui

Spin background from center to edge

My goal is to create a CSS design that works seamlessly on all screen sizes. I want the background to transition from blue on the left side to white on the upper middle to the right bottom corner. Here is my current code snippet: <style> .wrapper { ...

cssbackground-colorcss-transforms

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

$(document).ready(function () { $("#end").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function () { var start = $('#start'); var startDate = $(this).datepicker('getDate') ...

javascriptcssajaxtwitter-bootstrap

Corner of the Border Revealing a Clear Sky above

Looking to enhance my navigation bar (menu) by adding a cornered border when the user hovers over it. <nav> <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#blog">Blog</a ...

css

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

phphtmlcss

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare