Wordpress Sidebar showing in inspect on chrome but not on phone - php

Question

I ran in to an issue.
I've made a custom sidebar for a website. this includes a search, a category list and a pricing option.
As you can see up here, it shows it perfectly when inspecting on google chrome.
But when I open the same page on my phone, it does not show up anymore.
This sidebar is supposed to be shown by using the following custom css :
#media only screen and (max-width: 759px) {
#sidebar {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (max-width: 759px) {
#sidebar-3 {
display:block;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_product_search_widget-8 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_price_filter-10 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
#media only screen and (min-width: 767px) {
#woocommerce_product_categories-4 {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
Which basically makes sure that on the desktop it has the sidebar on the left (sidebar). Which it hides on phones/tablets and such. And on phone it has the sidebar-3 on the top which is hidden on desktop.
As you can see I even tried to do it by showing sidebar-3 by adding display:block. Sadly to no avail.
I'm using the same code on two other website's, where they work perfectly.
Does anyone have any idea what might be going on here?