0

I have a css code that I am using on my website, its working perfectly on desktop but I want to disable this on mobile and ipad devices. How can I do that?

    .sub-menu > li > a {
    color: #242424 !important;
    background: #ffffff !important;
    border: #333333 !important;
}
.sub-menu > li:hover > a {
    color: #ffffff !important;
    font-weight: bold !important;
    background: #004f94 !important;
    border: #004f94 !important;
}
Noah Opss
  • 1

1 Answers1

2

Good day,

in order to disable the setting for mobile only, you need to set the @media rule. It creates a container for css attributes that are only applied when fitting the specified criteria. Non specified criteria are inherited. If you want to read more about css rules, you can do this in the link below: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

.sub-menu > li > a {
color: #242424 !important;
background: #ffffff !important;
border: #333333 !important;


@media screen and (min-width: 420px){

.sub-menu > li > a {
color: #ffffff;
background: #ffffff;
border: #333333;
}
}
Brakke Baviaan
  • 460
  • 3
  • 10
  • `in order to disable the setting for mobile only` the `@media screen and (min-width: 420px){` is about the viewport size and not about where it is mobile or not. What if the mobile device has a viewport with `width` larger than `420px`? You have such a large variety of viewport sizes for the different devices that it is nearly impossible to determine based on those what kind of device it is. – t.niese Oct 26 '21 at 13:06
  • Frankly, setting up a couple of them seems tedious to me as well. It should work but it takes some effort to code for all the sizes you aim your application for. Probably there are more elegant ways for professional developement. The chosen size means just to serve as a working example of the code. – Brakke Baviaan Oct 26 '21 at 13:13
  • Media query seems the best way for this. iPad portrait is 768px wide in CSS (independant of pixel-depth). – Peter Krebs Oct 26 '21 at 13:22
  • @PeterKrebs it depends on what the need for targeting a mobile device is. If it is about `:hover` being problematic on devices that only use touch, then dimension-based media queries are not necessarily the best choice. – t.niese Oct 26 '21 at 13:37
  • Sure but `:hover` will just not apply on its own. No need to remove it explicitly, just don't have a hover effect mandatory for interaction. There are libraries dedicated to detect devices and their properties. That is mostly overkill for some styling differences. – Peter Krebs Oct 26 '21 at 14:05