Site-wide notice on mobile device

Can you please try the following using Appearance > Customize > Additional CSS ?

To make it always stick to the bottom irrespective of device widths:

@media (max-width: 320px) {
   p.demo-store {
     bottom: 0;
   }
}

and to hide the section from mobile devices:

@media (max-width: 767px) {
   p.demo-store {
     display: none;
   }
}

Please let me know if that helps.

Hi @subrataemfluence,

Thanks for getting back to me. I have tried using both CSS in the Additional CSS part of my site but still nothing happens once I save the changes and refresh my site.

Do you know of anything else I can do?

Many thanks!

I am not always a supporter of using !important in CSS rules, but can you please give it another try?

If you want the section to always stick to the bottom irrespective of device widths:

@media (min-width: 320px) {
   p.demo-store {
     bottom: 0 !important;
   }
}

OR if you have to hide the section completely from mobile devices, i.e. up to 767px wide screen:

@media (max-width: 767px) {
   p.demo-store {
     display: none !important;
   }
}

Let’s see how this goes.

I have tried both these CSS codes however they both still don’t work. Have we got any other options?

I appreciate all your support, thank you!

Currently no other solution is clicking in my mind! Sorry for not being very helpful. In case I find a solution I will let you know and would like you to do the same as well!

But above everything I still believe its media query which is playing the trick.

However, you can try one more thing. Instead of using media query you can think about keeping the bar always sticking to the bottom. As far as I remember there is a class already written for this. You can try by commenting out the media queries for this particular thing in your CSS so that only the general rule takes on and see how it behaves in smaller devices!

Here is what you can try for one more time.

Comment out the following media query

@media (min-width: 768px) {
  .demo_store {
    bottom: 0;
  }
}

and update the following:

.demo_store {
    position: fixed;
    left: 0;
    bottom: 69px; /* change this to bottom: 0; */
    right: 0;
    margin: 0;
    padding: 1em 1.41575em;
    background-color: #3D9CD2;
    color: #fff;
    z-index: 999;
}

Changing the value to 0 will make it sticky at the bottom and hence you have no media query in place it will always be there irrespective of device you are on.

The CSS file where the rules are written is located at https://tailoredathleteclothing.com/wp-content/cache/min/1/49bbaf66984111c72bc0f51fd89bb631.css. Not sure if you can access it. Otherwise in Additional CSS override the rule:

.demo_store {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 1em 1.41575em;
    background-color: #3D9CD2;
    color: #fff;
    z-index: 999;
}

Let me know if this works!

I just added the last one to Additional CSS and it worked!! Thank you so much I really appreciate your support! ??

Not a problem. Glad that I could help!