hide content on both desktop and mobile devices

I can't seem to figure out what's wrong here and my mind is blank.

I have 2 tables - one for desktop users and one for mobile users. I attempted to hide one using the display none property in my code.

.mobile{display: none;}

This CSS was meant to hide the mobile table on desktop:

@media only screen and (min-width : 320px) {
.desktop{display: none;}
.mobile{ display:block;}}

And this was the code for hiding the desktop table on mobile devices.

Here is the HTML snippet as well:

<table class="desktop">
 <tr>
  <td><img src="images/aqu-landing_icon-win.png"></td>
  <td><img src="images/aqu-landing_icon-mac.png"></td>
  <td><img src="images/aqu-landing_icon-and.png"></td>
  <td><img src="images/aqu-landing_icon-ios.png"></td>
 </tr>
 <tr>
  <td>Windows PC</td>
  <td>Apple PC</td>
  <td>Android Device</td>
  <td>iOS Device</td>
 </tr>
</table>
<table class="mobile">
 <tr>
  <td><img src="images/aqu-landing_icon-and2.png"></td>
  <td><img src="images/aqu-landing_icon-ios2.png"></td>
 </tr>
 <tr>
  <td>Android Device</td>
  <td>iOS Device</td>
 </tr>
</table>

Do you think this setup will work as intended?

Answer №1

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

This particular query is targeting devices with a screen size at least 320px wide. It will apply to any screens wider than this minimum width.

For styling specifically for mobile phones, the max-width property should be used:

.mobile { display: none; }

@media only screen and (max-width : 320px) {
   .desktop { display: none; }
   .mobile { display:block; }
}

Be mindful that the media query should be placed after the initial styling rules to prevent it from being overridden.

Answer №2

Your unique touch can make all the difference,

min-height: 480px

transform it to

max-height: 480px

You'll see the magic happen.

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

Design a big-sized button using Bootstrap framework

Is there a way to design a big, responsive button using Bootstrap? Similar to the example image linked below https://i.sstatic.net/xEBwc.png ...

Using jQuery to show an Ajax loader while the page is loading

Is it possible to display a loader (gif) before the HTML is loaded and during a page transition? I have seen this type of effect on many websites and am curious if it can be implemented. If so, is it achievable using jQuery, AJAX, and PHP? I know how to ...

Utilizing nested createHtmlOutputFromFile in Google Apps Script HtmlService to generate jQuery code

Embarking on a new journey, I am diving headfirst into the world of JQuery WebApp with Google Apps Script. Every day is filled with new discoveries and excitement as I immerse myself in learning to piece things together. Starting off with some examples an ...

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

Steps to display selected value on another page

Presented below is the code snippet: <html> <head> <meta charset="UTF-8"/> </head> <body> <!--Text field area starts here--> <H3>My Surveys </H3> <hr> <br> <br> <br> <ol> < ...

Development of "individual profiles"

This is my first time venturing into web app development and everything is quite unfamiliar to me. I have successfully set up a couple of PHP scripts to interact with an SQL database for user login and registration purposes. However, I now wish to implem ...

Enhance HTML Performance with Resource Preloading

Just a quick query I wanted to throw out there - would prefetching resources like js scripts and images actually slow down the page load time? For instance, let's say I have a page with several links such as: <link rel="prefetch" href="http://exa ...

The repetition of the react nodejs page load occurs when the get method is utilized

I've successfully set up a page and function for loading the customer list. However, I'm facing an issue where adding the get method to my code results in it being called every time information is received from the URL and the page is rendered. i ...

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

The code I have is as follows: $('.signup-form-wrapper').css("style", "display: block"); $('.login-form-wrapper').css("style", "display: none"); I'm not sure why it's not working. The current appearance of ...

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

Switch up the webpage's font using a dropdown selection box

I'm interested in adding a drop-down box to my webpage that allows users to change the font of the site when they click on it. I attempted the code below, but it didn't seem to work. Any suggestions? Regards, Sam CSS .font1 p { font-family: " ...

Switch out fontawesome icons for SVG icons

I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...

Ways to determine the height of a responsive div's background image

I have a container with a background image. Inside this container, there are additional elements like my navigation bar. My goal is to make the container have the same height as the background image. I've attempted the following: .bg { ...

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

Extracting and retrieving data using JavaScript from a URL

After reviewing some code, I am interested in implementing a similar structure. The original code snippet looks like this: htmlItems += '<li><a href="show-feed.html?url=' + items[i].url + '">' + items[i].name + '& ...

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

My QWERTY keyboard is dynamically rendered through a component as Bootstrap buttons using bootstrap-react. Each button does not have an ID to avoid relying on IDs in React. When a letter button is clicked, it triggers an onClick event passed as props back ...

Changing the position of a sprite using jQuery

Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

Adjust the width and height of the span to encompass more than just the content within it

I'm struggling to apply height and width to empty spans using CSS, but the span only fills its content <div class="container"> <div id="widgets-container"> <span class="widget" name="widget1" style="background-col ...