not-visible-on-mobile

I can’t figure out why the not-visible-on-mobile isn’t working .

I have this code inserted:
@media only screen and (max-width: 767px) {
.not-visible-on-mobile {
display:none !important;
}
}

@media only screen and (min-width: 768px) {
.visible-on-mobile {
display:none !important;
}
}

That I got from here:
https://kriesi.at/support/search/?bbp_search=not-visible-on-mobile

What has me confused is the visible-on-mobile works but not the other one.

This is the current child stylesheet additions:

/*Top Bar telephone and social media:*/
div#header_meta [data-av_icon]:before, div#header_meta .phone-info {
font-size: 18px !important;
}

/*Social Media in Socket:*/
#socket .social_bookmarks a {
font-size: 20px;
}

/*Border Transparent for Colored Section:*/
#transparent {
border-color: transparent;
}

/*Remove Image Overlay for Linked Images:*/
.image-overlay { display: none !important; }

/*Remove underline from links:*/
.avia_textblock a {
text-decoration: none !important;
}

/*Navigation Menu background hover color correction of spacing:*/
.html_main_nav_header #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a {
padding-right: 13px;
}

/*Contact Form Date Format Change:*/
add_filter(‘avf_datepicker_dateformat’, ‘avf_change_datepicker_format’);

function avf_change_datepicker_format($date_format) {
$date_format = ‘mm / dd / yy’;
return $date_format;
}

add_filter(‘avf_datepicker_date_placeholder’, ‘avf_change_datepicker_date_placeholder’);

function avf_change_datepicker_date_placeholder($placeholder) {
$placeholder = ‘MM / DD / YY’;
return $placeholder;
}

/*Masonry Gallery center the title and text:*/
.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
text-align: center;
}

/*Remove play button in front of menu page title:*/
#mobile-advanced a::before {
display: none;
}
.social_bookmarks::before {
content: “Volgen:”;
position: relative;
top: 5px;
display: inline;
float: left;
}

#top #wrap_all .av-social-link-rss a{background-color:#ffa133; color:#ffffff; }
#top #wrap_all .av-social-link-facebook a{background-color:#37589b; color:#ffffff; }
#top #wrap_all .av-social-link-twitter a{background-color:#46d4fe; color:#ffffff; }
#top #wrap_all .av-social-link-mail a{background-color:#9fae37; color:#ffffff; }
#top #wrap_all .av-social-link-dribbble a{background-color:#e44885; color:#ffffff; }
#top #wrap_all .av-social-link-linkedin a{background-color:#419cca; color:#ffffff; }
#top #wrap_all .av-social-link-search a{background-color:#222222; color:#ffffff; }
#top #wrap_all .av-social-link-gplus a{background-color:#de5a49; color:#ffffff; }
#top #wrap_all .av-social-link-behance a{background-color:#008cfa; color:#ffffff; }
#top #wrap_all .av-social-link-flickr a{background-color:#ff0086; color:#ffffff; }
#top #wrap_all .av-social-link-forrst a{background-color:#234317; color:#ffffff; }
#top #wrap_all .av-social-link-myspace a{background-color:#000000; color:#ffffff; }
#top #wrap_all .av-social-link-tumblr a{background-color:#345574; color:#ffffff; }
#top #wrap_all .av-social-link-vimeo a{background-color:#31baff; color:#ffffff; }
#top #wrap_all .av-social-link-youtube a{background-color:#a72b1d; color:#ffffff; }
#top #wrap_all .av-social-link-pinterest a{background-color:#cb2027; color:#ffffff; }
#top #wrap_all .av-social-link-skype a{background-color:#12a5f4; color:#ffffff; }
#top #wrap_all .av-social-link-instagram a{background-color:#a67658; color:#ffffff; }
#top #wrap_all .av-social-link-five_100_px a{background-color:#222222; color:#ffffff; }
#top #wrap_all .av-social-link-soundcloud a{background-color:#F76700; color:#ffffff; }
#top #wrap_all .av-social-link-xing a{background-color:#006567; color:#ffffff; }
#top #wrap_all .av-social-link-vk a{background-color:#597BA5; color:#ffffff; }
#top #wrap_all .av-social-link-reddit a{background-color:#FF4500; color:#ffffff; }

.minheight {
min-height: 375px;
}

#top .av_header_glassy.av_header_transparency .header_bg {
opacity: 0.75;
background: #241b18;
}

/*Control which elements are on mobile:*/
@media only screen and (max-width: 767px) {
.not-visible-on-mobile {
display:none !important;
}
}

@media only screen and (min-width: 768px) {
.visible-on-mobile {
display:none !important;
}
}

What am I missing?

Thank you.

• This topic was modified 8 years, 2 months ago by Micheal0424.