Show images exclusively on screens with a smaller resolution

Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing.

<style type="text/javascript>
      .icon-xyz
      {float: left; width: 22px;cursor: pointer;background: none;}

      @media only screen and (max-device-width: 568px) and (min-device-width: 320px) and (orientation: portrait)
     {.icon-xyz {float: left;width: 22px;background: none;cursor: pointer;padding: 0 13px !important;}}

</style>

Here is the script for adding the image:

$(document).ready(function() {
      var loc = window.location;
      if (loc.toString().toUpperCase().indexOf('/home/') > -1)
      {
      $("#icon-xyz").css("background", "url(/images/Icon1.png) no-repeat");
      if($.cookie("lang") == "es")
      {
      $("#icon-xyz").css("background", "url(/images/Icon2.png) no-repeat");
      }
      }
});

https://jsfiddle.net/ad8bc8tv/1/

javascripthtmlcssmedia-queries

Answer №1

When utilizing max-device-width and min-device-width, testing this media query on your desktop browser may not yield the expected results, as it is tailored to execute specifically on devices that meet those criteria.

This could be a contributing factor to why it seems to be ineffective.

To test in a desktop setting, consider utilizing max-width and min-width instead, as these parameters pertain to the size of the browser window rather than the screen size of the device.

Google even advises against the use of *-device-width media queries due to issues with legacy browser compatibility and adaptability (further details).

As for a potential solution, here's a CSS approach that may prove successful:

.icon-xyz {
  display: none;
}
@media only screen and (min-width: 320px) and (max-width: 568px) and 
   (orientation: portrait) { .icon-xyz { display: inline; } }
<img class="icon-xyz" src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">

jsFiddle

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

Switching a span's style in a jQuery accordion heading

To improve the usability of an accordion header, I am looking to add an expand/collapse button to the right side of each header. When clicked, this button should change from "expand" to "collapse". However, I have encountered some issues with the JavaScrip ...

jquerytoggleaccordionhtml

MDL Tab loading Problem

When visiting my website at this link, which is powered by MDL from Google, there is a troublesome issue that occurs. The #harule tab briefly appears before disappearing. This tab should actually be hidden on the page until a user clicks on the harule tab ...

javascriptjqueryhtmlcss

Using jQuery to alter an href link's attribute

I am currently attempting to modify the content of a href using jQuery. After researching various solutions on this platform, I came across one that I am trying to use for implementation: How to change the href for a hyperlink using jQuery My current app ...

javascriptjqueryhtmlhref

I am encountering problems with images that are imported as module imports in a Vue.js project

Currently, I have stored all the default images for my Vue project in a designated folder. The path to this folder is web/images/defaults/<imageNames>.png. Instead of importing each image individually in my components, I wish to create a file that co ...

javascriptvue.jswebpackimportes6-modules

The error message "Uncaught ReferenceError: e is not defined" is popping up in my code when

As a beginner with React and Material-UI, I am encountering an error that I cannot seem to resolve. When I load a component using material-ui/data-grid, the data grid simply displays "An error occurred" in the app. However, when I load the component withou ...

javascriptreactjsmaterial-ui

Incorporating an image prior to the "contains" term with the help of JavaScript

Seeking assistance with the code snippet below without altering the text targeted in my "a:contains" statement. The challenge lies in determining the appropriate placement of ::before in the script provided. Link: https://jsfiddle.net/onw7aqem/ ...

javascripthtmljquerycssajax

The HTML footer designed with bootstrap is not behaving as expected. It is not staying fixed at the bottom of the page and is not displaying at full width despite my coding efforts

Working on a small Sinatra app with bootstrap for layout, I'm encountering some issues. The layout is not sticking to the bottom and not displaying at 100% width as intended. Additionally, the footer text is not centering even after applying the text ...

htmlcsstwitter-bootstrapfooter

Enabling hover effects to scroll divs only when interacted with

I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...

javascriptcssreactjs

What is the best way to create a form that includes both dynamic objects and dynamic arrays using a JSON schema?

I have observed how a JSON schema can be utilized to construct dynamic arrays. My goal is to develop a JSON web form using a JSON schema that allows for objects (dictionaries) to be expandable similar to arrays. For example, you can visit the demonstrati ...

javascriptjsonformsjsonschemaformbuilder

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

javascriptjqueryhtmlformsvelo

The D3 data format allows for creating interactive sunburst charts that can be easily zoom

My data is structured similarly to flare.json as shown in this example: I'm curious about the function used by the d3 zoomable chart to format the data in this way. The original structure in flare.json looks like this: { name: "stuff", childr ...

javascriptjsond3.jszoomingsunburst-diagram

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

Hello, I could really use some help with a problem I'm facing. I am currently working on my personal portfolio website using react.js and bootstrap. I've integrated the react popupbox package, but I noticed that on small screens, my picture is no ...

cssreactjsimagebootstrap-4package

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

The collapse feature of Bootstrap 5 navbar is experiencing delays

Can anyone assist me with the bootstrap navbar collapse issue I am facing? When I click on the burger menu, there is a slight delay of less than a second before it fully expands. Additionally, if I click very quickly multiple times on the burger icon, the ...

cssanimationnavigationbootstrap-5

Run a PHP statement when a JavaScript condition evaluates to true

I am attempting to run a php statement if my javascript condition is true. Here is the code snippet that I have written: <input id="checkbox1" type="checkbox"> MSI<br></input> <script> $(document).ready(function(){ $(&apos ...

javascriptphpif-statementconditional-statementsexecute

Retrieving data from an anonymous function in AngularJS and outputting it as JSON or another value

Within the following code, I am utilizing a server method called "getUserNames()" that returns a JSON and then assigning it to the main.teamMembers variable. There is also a viewAll button included in a report that I am constructing, which triggers the met ...

javascriptangularjsjsonanonymous-function

Bluebird Enthusiastically Predicting the Outcome of a Complex Operation

Lately, I've been heavily utilizing Bluebird in my HAPI API development. However, I've encountered a perplexing issue that has left me puzzled due to either my understanding or lack of experience. Below is an example demonstrating the challenge ...

javascriptnode.jspromisebluebird

Every time I try to loop through my JSON object using an $.each statement, an error is thrown

When I execute an $.each loop on my json object, I encounter an error 'Uncaught TypeError: Cannot read property 'length' of undefined'. It seems that the issue lies within the $.each loop as commenting it out results in the console.log ...

javascriptjsoneach

Issue with Vue 2 emitting events and not properly executing associated method, despite correct setup

I am attempting to trigger an event from a child Vue component to its parent using this.$emit('collapsemenu'). However, when I try to capture this event in the parent using v-on:collapsemenu="collapseMenuf($event)", nothing seems to ha ...

javascriptvue.jsvuejs2

Troubleshooting display problems with the categories menu in Opencart version 1.5.1 caused by IE

For our opencart website, we utilize the li element for the sub categories items. displays properly on all modern browsers. However, we need to ensure compatibility with Internet Explorer 6 as well. ...

htmlcss