Tagged: Section Background Overlay
-
AuthorPosts
-
May 4, 2015 at 2:12 pm #438882
Hallo,
I noticed that the Color Section background on Firefox on mobile devices is taking the entire page background.
Please refer to http://www.coodo.com
I was trying to don’t show it following the instructions on the thread below… but it doesn’t work.
https://kriesi.at/support/topic/enfold-background-image-remove-on-mobile/Can you please help?
ThanksMay 5, 2015 at 7:09 am #439531Hey MarkDare!
Not sure I understand what you mean, do you want to hide the slider on mobile devices?
Cheers!
RikardMay 5, 2015 at 11:25 am #439638Hi Rikard,
I will try to explain it better.
I’m experiencing a bug with my website on the mobile version of Firefox:
I used an image background in a Color Sections called “coodoshare” (ID: coodoshare) on my homepage at http://www.coodo.com.
On mobile Firefox that picture is taking the entire page background instead of staying only in the Color Section. Here the screenshots taken on my Android mobile for a better understanding:
on Chrome where it works fine: http://www.coodo.com/chrome.png
on Firefox where it doesn’t work: http://www.coodo.com/firefox.pngThe best would be to solve the bug on Firefox only, so that the Color Section is shown correctly as it is in Chrome. The solution provided in the previously mentioned post (using the following css) would be a second choice, anyway I already tried it without success.
@media only screen and (max-width: 768px) { #coodoshare { background-image: none!important; }}
I hope I have been clear enough so that you can provide a solution for that.
Thanks in advance!May 7, 2015 at 5:00 am #440739Hey!
Please add this in the Quick CSS field:
.avia-android #coodoshare .av-parallax { background-size: 100% 100% !important; background-attachment: scroll !important; }
If you want to completely remove the background on these devices, use this:
@media only screen and (max-width: 768px) { .avia-android #coodoshare .av-parallax { background: none !important; }}
What is the firefox version in your android device? The background-size property is only supported on Firefox 37 and up.
Best regards,
IsmaelMay 7, 2015 at 2:44 pm #440957Hi Ismael, thanks for the support.
My Firefox version on Android is 37.0.2
I tried the first css but the picture is still taking the entire page background, stretched to fit the screen width (see link below)
http://www.coodo.com/firefox_new.pngThe second css is working fine :)
Anyway, since I use a Color Section also in the News page as heading element, I would ask you if it’s possible to try some other way to have the image covering the right area.
Otherwise I will go for the second solution (background: none).
Is there a way to use it on Firefox browsers only?
Can I use the code with multiple ids like for example:@media only screen and (max-width: 768px) { .avia-android #coodoshare #news #contact .av-parallax { background: none !important; }}
Thanks!
- This reply was modified 9 years, 6 months ago by MarkDare.
May 11, 2015 at 8:15 am #442245Hi!
The correct code is:
@media only screen and (max-width: 768px) { .avia-android #coodoshare .av-parallax, .avia-android #news .av-parallax, .avia-android #contact .av-parallax { background: none !important; }}
If you want to target firefox on android devices, replace .avia-android with .avia-android.avia-mozilla.
Regards,
IsmaelMay 11, 2015 at 1:04 pm #442413Thanks Ismael,
it works only on the #coodoshare, but not on the #news. That’s weird… anyway I removed the background from the News page so I solved it this way.
What I aslo noticed is that on Mozilla Firefox for Android the Fullscreen Slider and the Promo Box are not correctly scaled. They both exceed the screen width. That’s not happening on other browsers. Can you give me some hints about it?
Thanks again!May 12, 2015 at 9:44 am #442872Hey!
Make sure that there are no extra spaces after the comma. Try this one to fix the promobox:
@media only screen and (max-width: 480px) { .avia-mozilla.avia-android .av_promobox { max-width: 300px; }}
Regards,
IsmaelMay 12, 2015 at 12:46 pm #442962Thanks Ismael,
the code for the promobox is working fine :)
Can you help with the Fullscreen Slider too?
Thanks again!May 14, 2015 at 2:30 pm #444285Hi!
Can you please provide a screenshot of the full screen slider issue?
Best regards,
IsmaelMay 16, 2015 at 8:15 pm #445297I am having the same issue with Enfold 3.08 using Firefox 38 on Samsung Note 3. The color section background at the bottom of the page becomes the background for the entire page. Other browsers display the page beautifully on the same mobile device.
May 18, 2015 at 10:59 am #445573Hi Ismael,
here the screenshots:
chrome (working): http://coodo.com/chrome.png
firefox (not working): http://coodo.com/firefox.pngBest regards
May 21, 2015 at 2:25 pm #447735Hey!
have in mind that we normally don’t support firefox on mobile due to little demand. But try this workaround for firefox in you Quick CSS:
.avia-mozilla .avia-caption-title { width: 60%; } .avia-mozilla .avia-slideshow-button { left: -83px; }
and adjust as needed.
Best regards,
AndyAugust 14, 2017 at 6:38 pm #838867Dear Sir,
Check first in safari or chrome where displaying well: http://www.zsidokulturalisfesztival.hu/#hirek
Pls check me this firefox bug (section background overlay): http://www.zsidokulturalisfesztival.hu/#hirek
Ty!
August 17, 2017 at 6:43 am #840247Hi,
Thank you for the info.
Please add the following css code in the Quick CSS field.
.avia-mozilla div .av-section-color-overlay { z-index: -1; }
Best regards,
IsmaelAugust 17, 2017 at 8:21 am #840291THX A LOT ISMAEL! ;-)
August 17, 2017 at 8:48 am #840298Dear Ismael,
FIREFOX: Not working fix header and flashing on hover on masonry images.
SAFARI AND CHROME GREAT!
Ty,
d.
- This reply was modified 7 years, 3 months ago by dwebprojects.
August 21, 2017 at 5:34 am #841834 -
AuthorPosts
- You must be logged in to reply to this topic.