-
Posts
-
Hi all,
The following issue has been addressed a couple of times on this forum, but unfortunately none of them seem to be working for me. Hence I´m addressing it once again.
I have two background images of a person featured on branspyre.nl. I like to see them removed on any tablet or phone as they clearly interfere with the content on smaller screens.
The section name that has the female shown, is named: waarom
When I add the following to Quick CSS,
@media (max-width: 989px) { #waarom { background-image: none !important; } }
, the image becomes hidden when I scale my browser on my laptop below the specified threshold. On my tablets or smartphone (different OS), however, the image is still displayed even after clearing the cache.
I´d appreciate it if someone could take a look at this issue.
If you need any further information, please let me know.Kind regards,
RuudHe Elliott,
Nice try, but unfortunately, the image is now not only shown on tablets/phone, but also on my laptop when I scale my browser. Could it be that some other custom CSS code interferes with the ones suggested?
Here´s all the code I´ve been using for this site:
.header_color .header_bg {
opacity: 1 !important;
}
#main .main_color .content {
padding-bottom: 10px;
padding-top: 10px;
}
body {
font-size: 17px;
}
.avia-image-container-inner {
box-shadow: 0 0 10px #808080, 0 0 0 1px #eeeeee;
padding: 0px;
}
#top .av-siteloader-wrap {
background-color: white !important;
}
.noborder{
border: none !important;
background: transparent !important
}
@media screen and (max-width: 989px) { #waarom, #referenties { background; none !important; } }If you require any further information, please let me know.
Awaiting round 2 ;)
Ruud
Hi!
Please replace the code with this:
@media screen and (max-width: 989px) { .avia_mobile #waarom, .avia_mobile #referenties { background; none !important; } }The code should be applied on mobile devices only.
Cheers!
IsmaelHello Ismael,
Sorry no good.
I also did a trial with no custom CSS code, except the ones you guys are suggesting, but unfortunately, to no avail.Hope your bags of tricks aren´t empty yet!
Regards,
RuudHi!
My bad. Instead of colon, I added a semi-colon after the background property. We modified the code:
@media screen and (max-width: 989px) { .avia_mobile #waarom, .avia_mobile #referenties { background: none !important; } }Regards,
IsmaelHi all,
The code works on my laptop, when I scale/rezise my webbrowser. On my tablet and phone, on the other hand, it does unfortunately not work.
Would the solution be to hide the specific images (the file names) in a mobile environement?
Kind regards,
RuudHi,
If it works on desktop it will work on other devices as well, please try to flush your browser cache and reload a few times to see if that helps.
Best regards,
RikardHe Rikard,
Flushed it, reloaded, but still not working, whilst other changes implemented are visible on all (mobile) devices. Could you please verify if the concerning backgrounds are hidden on your mobile device?
Kind regards,
RuudHey!
The background is displaying on my iPod when I checked it so I guess the solutions are not working. Please try this instead:
@media screen and (max-width: 989px) { .avia-android #waarom, .avia-android #referenties, .avia-ipad #waarom, .avia-ipad #referenties, .avia-iphone #waarom, .avia-iphone #referenties { background: none !important; } }What is this code for?
@media screen and (max-width: 767px) { #waarom, #referenties { background: transparent !important; } }Please remove it.
Cheers!
IsmaelHello Ismael and others,
No, not working either. I really appreciate all the effort that is put into this matter, but perhaps there simply is no easy solution to this. Hence I shall remove these images – no problem whatsoever.
Kind regards,
RuudHey,
Not sure if you got this fixed or not, or did you go for a different solution? Please let us know if you should need any more help on the topic.
Thanks,
Rikard
- The topic ‘Hide background image for specific sections on mobile devices’ is closed to new replies.