Using CSS media queries to adjust styles based on hover status and screen size

I am currently working on a CSS Media Query to target different styles for mobile devices, desktops with low resolution screens, and desktops with high resolution screens. I initially attempted using the hover query to distinguish between mobile and desktop devices based on screen height.

While this method was successful in selecting desktop styles, I encountered an issue where my Samsung cellphone displayed the div background as green instead of the intended blue.

How can I adjust my code to achieve the desired outcome?

        @media (hover: hover) and (max-height: 999px) {
            div {background:green;}
        }

        @media (hover: hover) and (min-height: 1000px) { 
            div {background:red;}
        }

        @media (hover: none) {
            div {background:blue;}
        }
<div style="width:200px;height:200px;"></div>

htmlcssmedia-queries

Answer №1

Give this a shot:

        @media (hover: hover) and (min-width: 787px) {
            div {background:green;}
        }

        @media (hover: hover) and (min-width: 1000px) { 
            div {background:red;}
        }

        @media (hover: hover) and (max-width: 786px) {
            div {background:blue;}
        }
<div style="width:200px;height:200px;"></div>

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

Is it possible to resize an inline SVG element without modifying the <svg> tag?

Utilizing a Ruby gem known as rqrcode, I am able to create a QR code in SVG format and send it as an API response. Within my frontend (Vue.js), I am faced with the task of displaying the SVG at a specific size. Currently, my code appears as follows, rende ...

cssvue.jssvg

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...

jqueryhtmlcss

Get the value of the button that has been clicked

I have a query regarding building a website that can be started via PowerShell. The PowerShell HTML code I am using is: $proxys = "" foreach ($email in $ADObj.proxyAddresses){ $proxys += "<button id='$email' name='alias&apo ...

javascripthtmljquerypowershellbootstrap-5

Avoiding the use of mailto links in PHP

One problem I encountered is with a mailto link in my PHP code: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5a525e56537f5b50525e5651114b535b">[email protected]</a>?subject=<?php rawurlencode ...

phphtml

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Struggling with a challenge for two days now, I have attempted to implement a panel-box using bootstrap and AngularJS. Within the confines of a controller, my code looks like this: <div id="menu2a"> <div class="panel list-group"> <div ...

javascriptjqueryhtmlcssangularjs

Creating and deleting HTML elements in a dynamic array format

My current approach involves utilizing jQuery and JavaScript for the purpose of dynamically adding and removing HTML elements. Specifically, I am focusing on the removal of particular HTML elements. The code snippet is as follows: $(document).ready(fun ...

javascriptjqueryhtml

elements positioned next to each other with gaps in between

Why is it so challenging to position two divs next to each other with a small space between them? I've attempted <div class="wrapper"> <div class="box" style="background-color: pink;">First Div</div> <div class="spacer">& ...

htmlasp.net

Execute the PHP file using a script tag

Is there a way to include PHP code within <script>? For example, like this: `<script src="example.php">. I understand that the script tag is typically used for JavaScript, but I want PHP to generate JS that can be inserted using the s ...

javascriptphphtml

My custom CSS being overridden by Bootstrap styles

I'm currently working with Twitter Bootstrap's CSS, but it seems to be overriding some of my custom classes. Initially, I placed it before my own CSS in the HTML header (I am using jade and stylus template engines): doctype html html head ...

htmlcsstwitter-bootstrappugstylus

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

Do my media queries accurately reflect the design?

I am new to web design and currently taking a course. As part of my assignment, I need to make my website responsive. However, I am having trouble with my media queries. Despite hours of research and tweaking, some elements are not responding as expected. ...

htmlcssmedia-queriesresponsive

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

Is there a way to place the icon on the right side of the @mui/Chip component?

Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...

cssreactjsmaterial-uisx

Tips for Importing HTML Table Data Line by Line into SQL Table

I have the following code here. I am looking to insert HTML table data row by row into an SQL database. However, with this current code, only the last row is being stored in the database table. I believe I need to implement a loop to read the data from e ...

phphtmlsql

Tips for refreshing Facebook's og tags

I've been racking my brains over this issue for days, and despite the abundance of similar inquiries, I have yet to find a solution. On my blog-like website, each post requires its own title and description for Facebook articles. I know I can set the ...

javascripthtmlfacebookweb

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

javascripthtmlcss

What is the best way to customize the appearance of the elements in the hamburger menu within a Bootstrap navigation bar?

I have successfully implemented a responsive navbar using Bootstrap 4. When the screen size is large, there are 2 buttons displayed, and when it's small, a hamburger menu appears. [insert image description here][1][insert image description here][2] ...

cssbootstrap-4responsive-designnavbarhamburger-menu

Creating an array of multiple divs based on numerical input

I am working on a project to show multiple divs based on the user's input number. For example, if the user selects 3, then 3 divs should be displayed. While I have successfully implemented this functionality, I need to dynamically assign IDs to each ...

javascriptjqueryhtml

Tips on getting your card to stay at the top

Screenshot of webpage HTML (EJS): In the HTML file, look for the section after <%- include("navbar.ejs") -%> inside the body tag. The ".cardholder" contains "anime-card" templates (card.ejs). The first and last div within ".cardholder" are ...

htmlcssnode.jsexpressejs

Tips for making a horizontal scrolling container that doesn't hide elements with overflow-y?

I'm struggling to find an example of horizontal scrolling that doesn't hide content with overflow-y. Is there a way to create a horizontally scrolling div where absolutely positioned elements (dropdowns) remain visible? If you have a working ex ...

htmlcss