-
Posts
-
I need to hide background images on mobile devices because the images are too big. I found this code on your support site:
@media only screen and (max-width: 767px) {
#top #section-mobile-bg {
background: none !important;
}and to test two sections of my page, I updated it to:
@media only screen and (max-width: 767px) {
#leadership #constitutional {
background: none !important;
}But this code forced my website width to 767 on a dekstop screen and didn’t remove images on a mobile screen. Also, I would like to expand the code to include a color replacement so it is not default white. Example #f8f8f8
apologies, but the code is actually below, I forgot my page call out.
.page-id-824 @media only screen and (max-width: 767px) {
#leadership #constitutional {
background: none !important;
}no, not yet. I can’t see any changes on my phone for “fixed” background images.
This is the code for my parallax images and I see changes on my cellphone
@media only screen and (max-width: 989px) {
#leadership .av-parallax .av-parallax-inner, #constitutional .av-parallax .av-parallax-inner, #instructor .av-parallax .av-parallax-inner, #case-management .av-parallax .av-parallax-inner {
background-image: none !important;
}
}The one for “fixed images” do not work
@media only screen and (max-width: 989px) {
#organizational, #report, #organizational {
background-image: none !important;
}
}Hi,
For the remaining background images on the page, please try this css:@media only screen and (max-width: 767px) { .page-id-824 #wellness .av-parallax,.page-id-824 #report .av-parallax,.page-id-824 #organizational .av-parallax { background-image: none !important; background-color: #f8f8f8 !important; } }After applying the css, Please clear your browser cache and check.
Best regards,
Mike
- The topic ‘Help with CSS for hiding background Images’ is closed to new replies.