'How to display a button in header on only one specific page in mobile view

I have a button in my theme header so displayed the button in header. Then the issue was to display this button on only one specific page in header section other pages should not show this button so I did this with the help of below code:

 <style>
 .header-menu-btn {display: none !important}
.page-id-1675 .header-menu-btn {display: inline !important}
</style>

Now the issue is that its not displaying in mobile view mean when we open website in mobile the button do not displays so how can I display it on mobile as well as on pc on a specific page: Here is the code which I tried but nothing happen:

 <style>
    @media only screen and (max-width: 450px) {
.page-id-1675 .header-menu-btn {
        display: inline!important;
    }

}

htmlcss


Solution 1:[1]

header img{width:100px; display:none;}

@media(max-width:500px){
  header img{display:block;}
}
<header>
 <img src="https://images.unsplash.com/photo-1550587542-1668407b73d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
</header>

use this media query for mobile devices..

<style>
    @media(max-width:500px){
      /** input this css **/
    }
   </style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions