Disregard CSS styling for all mobile devices

Is there a way to exclude specific CSS styles on smartphones for my website?

Below is the CSS I want to exclude :

a[href="http://localhost/wordpress/ireland/"], a[href="http://localhost/wordpress/france/"], a[href="http://localhost/wordpress/spain/"], a[href="http://localhost/wordpress/portugal/"], a[href="http://localhost/wordpress/canary-islands/"], a[href="http://localhost/wordpress/africa/"], a[href="http://localhost/wordpress/central-america/"], a[href="http://localhost/wordpress/indonesia/"], a[href="http://localhost/wordpress/carribean/"]{
   pointer-events: none;
   cursor: default;
}

Could the solution involve this code snippet? 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

I find it confusing, any guidance would be appreciated!

UPDATE: 

@media (min-width: 600px){
    a[href="http://localhost/wordpress/ireland/"], a[href="http://localhost/wordpress/france/"], a[href="http://localhost/wordpress/spain/"], a[href="http://localhost/wordpress/portugal/"], a[href="http://localhost/wordpress/canary-islands/"], a[href="http://localhost/wordpress/africa/"], a[href="http://localhost/wordpress/central-america/"], a[href="http://localhost/wordpress/indonesia/"], a[href="http://localhost/wordpress/carribean/"]{
       pointer-events: auto;
       cursor: default;
        }
    }
htmlcssresponsive-designstylesheetpointer-events

Answer №1

You're so close to getting it right.

All you need to do is enclose the css within a media query.

If you're unsure about the width limitation, consider that most smartphones have screens less than 600px in size, so the code below should suit your needs perfectly:

@media (min-width: 600px){
    a[href="http://localhost/wordpress/ireland/"], a[href="http://localhost/wordpress/france/"], a[href="http://localhost/wordpress/spain/"], a[href="http://localhost/wordpress/portugal/"], a[href="http://localhost/wordpress/canary-islands/"], a[href="http://localhost/wordpress/africa/"], a[href="http://localhost/wordpress/central-america/"], a[href="http://localhost/wordpress/indonesia/"], a[href="http://localhost/wordpress/carribean/"]{
       pointer-events: none;
       cursor: default;
    }
}

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

Customizing checkbox styling in Sencha Touch with CSS to adjust the background-color upon being checked

I've been working on a code that customizes the appearance of the checkbox "tick" mark when it's selected: .x-input-checkbox:checked + .x-field-mask:after { //Customize your styles here } Just to clarify, this snippet only affects the check ma ...

csssencha-touch-2.3

Tips for utilizing the "all" attribute in CSS

What is the purpose of the all property in CSS? This question can be found in reference to this particular query. As stated in this source: The ‘all’ property serves as a shorthand for resetting all CSS properties. Name: all Value: ...

htmlcss

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

jqueryhtmlformsformat

How to pass multiple variables, such as "Value" and "Selected", to the next HTML page in Flask without only passing "Selected"

I am currently utilizing Flask to generate an HTML form (specifically a dropdown menu) with values retrieved from a list output by a Python function. The variable in the Python app.py code is called "two_dimensional_list". Here are some sample values: [[&a ...

pythonhtmlflask

Is the only hash in the anchor tag referring to a link?

In the new project I'm diving into, my focus has shifted from backend development to web-related tasks. While exploring the HTML codebase, I noticed a recurring pattern: <a href='#'>some link</a> Subsequently, JavaScript is lin ...

javascripthtml

Exporting headers of an HTML table using Jquery to Excel is not functioning properly

I need assistance with exporting an HTML Table that is dynamically generated based on the data. The table layout is defined before the data is populated, and once the data is queried, rows are added to the table dynamically. <table id="findCntrctTable" ...

jqueryhtmlexcel

How can I make a checkbox with a label like the one shown in the w3schools example, but for a textbox instead?

After exploring the Input Groups examples on w3Schools Bootstrap, I noticed that there are Input Groups Labels that wrap around the input box. You can see an example of this here. Is it possible to achieve a similar layout for checkboxes as well? EDIT Th ...

htmlbootstrap-4

Obtaining text from HTML code

Currently, I am faced with a challenge. My task involves extracting HTML text and saving it as an Anchor object. Here is an example: <html> <head> <title>{dynamihead/}</title> </head> <body> {repeatinghtml} <p>{r ...

c#html

Creating a custom variable assignment in Bootstrap within the custom.scss file

I've been searching for a solution to this problem for half a day now. My goal is to change the value of the $primary variable from the default $blue to the $orange variable. I tried following the instructions in the documentation: $primary: red; @imp ...

csssassbootstrap-5

What is the best way to navigate to the bottom of a page when new data is added?

I've created a chat feature in my Ionic app, but the issue is that when a user receives a new message while being on the chat screen, the view doesn't automatically scroll down to show the new message. The user has to manually scroll down to see ...

javascripthtmlcssfirebaseionic-framework

ways to interpret a string input within the <input class> class using selenium in C#

When trying to extract the string value from the input class using selenium, I encounter an issue. Below is the HTML code for the element I am trying to access: <input class="form-control" id="GroupName" maxlength="50" nam ...

c#htmlselenium-webdriver

Having trouble identifying the source of the margin-right styling being used

I'm facing a perplexing issue with the CSS for my sidebar (#primary) on my website. Even though I haven't specified any margin for the sidebar, it is somehow getting a margin-right of 605px. In trying to solve this, I experimented with relative ...

htmlcss

JavaScript code to verify if a checkbox is selected

Having some trouble making a text box value change based on checkbox status. I've attached a function to the onclick event of the checkbox, but it's not quite working as expected. <div> MyCheckbox <input type="checkbox" id="Check1" name ...

javascripthtmlcheckbox

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Can someone assist me in figuring out how to apply multiple options to v-bind:class? In my Uno game, I need to determine the text color of cards based on their color property stored as a list of objects like this: ([{ Color: green, Value: 6}]. Here is my ...

javascripthtmlvue.jsvuejs2vue-component

Adaptive grids in Bootstrap

I've been using bootstrap and I'm trying to get the items to align next to each other, but using the bootstrap columns doesn't seem to be working for me. I may be coding it incorrectly. <link rel="stylesheet" href="https://cdn.jsdelivr ...

htmlcsswebbootstrap-4

Deactivate the selection option for the radio button that is checked in a specific

I am attempting to deactivate the selection when any of the "color1, color2, or color3" buttons are chosen. I desire it to be activated only when the "color4" radio button is selected. After consulting various sources, integrating it into my code has left ...

javascripthtmlcss

Retrieve the accurate placeholder color using JavaScript

I modified the default placeholder color of my input to blue. How come I am seeing a black placeholder color when using JavaScript? const fetchPlaceholderColor = () => { let inputElement = document.querySelector('.myClass'); let inputEl ...

javascripthtmlcssplaceholder

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

javascriptjqueryhtmlcss

Steps for displaying or hiding the mobile menu when clicked

I am struggling with displaying a menu and its mobile version in HTML. The mobile menu doesn't seem to be functioning properly. Is there a way to initially show only the menu SVG icon, hide the mobile menu, and then reveal the mobile menu along with t ...

javascriptjquerycsstailwind-css