-
AuthorPosts
-
April 16, 2021 at 2:47 pm #1294803
Hi
We have a landing page which looks nice on desktops and mobiles.
Unfortunately it does not look nice on tablets because of the background images.
Is it possible, to disable background images, but only for tablets, not for desktops and mobiles?
See login data in the private content section.
Thanks very much.
Best regards
MikeApril 16, 2021 at 5:08 pm #1294814maybe you are able to set up some media querries –
you know the rules with min-width and max-width
but there are also: device width – and that you can usef.e.:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /**** your rules here ****/ }
but the devices are numerous, so you probably won’t get 100% coverage of all devices.
See here a link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/As far as i know Enfold has this on avia-compat.js at the beginning:
var avia_is_mobile = false; if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement) { avia_is_mobile = true; document.documentElement.className += ' avia_mobile '; } else { document.documentElement.className += ' avia_desktop '; } document.documentElement.className += ' js_active ';
so all mobile devices get the class on html : avia_mobile
mybe a combination of this and the media-query is a good way to do this@media only screen and (min-device-width : 768px) { .responsive.avia_mobile #top * { background-image : none !important; } }
* but won’t that lead to very unsightly big gaps in your layout?
Sliders got often imgs – so they are untouched but color sections that contain only one heading, etc. pp.
think of that a lot of gradients are set by background-image.so to only get rid of background-images with url you can do that – but – see *
@media only screen and (min-device-width : 768px) { .responsive.avia_mobile #top *[style*="url("]{ background-image : none !important; } }
- This reply was modified 3 years, 8 months ago by Guenni007.
April 19, 2021 at 9:00 am #1295165April 19, 2021 at 2:59 pm #1295294Hi
Thanks for the help. But now how can I overwrite the styling of this one (and all other sections):<div id="av_section_2" class="avia-section main_color avia-section-no-padding avia-no-border-styling avia-full-contain avia-bg-style-scroll avia-builder-el-6 el_after_av_section el_before_av_section av-medium-hide av-small-hide av-mini-hide av-minimum-height av-minimum-height-50 container_wrap fullsize" style="background-color: #fdfbee;background-repeat: no-repeat; background-image: url(https://yourchoice.ch/wp-content/uploads/2021/04/Website-bauen1-e1618383320865.png), linear-gradient(to right,#fdfbee,#ec9f0f);background-attachment: scroll; background-position: bottom right; " data-section-bg-repeat="contain" data-av_minimum_height_pc="50">
I want to remove the background-image of all sections when the device has a specific size.
Thanks very much.
Best regards
Mike- This reply was modified 3 years, 8 months ago by YourChoice Informatik GmbH.
April 19, 2021 at 6:39 pm #1295324So, with your nick – it’s not that hard to guess your domain – it would also be possible to publish the page it’s about – so it’s much easier to give accurate advice.
April 19, 2021 at 7:01 pm #1295332Hi again
The page is published already under https://yourchoice.ch/vereinswebsite/
Thanks very much.
Best regards
MikeApril 19, 2021 at 9:42 pm #1295353Aber du hast es doch ganz gut gemacht. Der Wechsel mit den Color-Sections und dem Einsatz von einmal einem Image und zum Anderen einem Hintergrund Bild.
Wo genau willst du jetzt was ausblenden?April 21, 2021 at 10:59 am #1295758Hallo
Die Hintergrundbilder sehen meist gut aus, jedoch auf dem Tablet im Querformat nicht.
Drum möchte ich diese dort ausblenden, sodass z.B.
background-image: url(https://yourchoice.ch/wp-content/uploads/2021/04/Website-bauen1-e1618383320865.png)
Auf einem Tablet im Querformat eben ausgeblendet wird bzw. dort kein background-image gesetzt wird.
Wie muss das CSS dazu lauten?
Besten Dank.April 23, 2021 at 7:49 am #1296225Hi,
The CSS for landscape is basically the same as portrait, which @guenni007 posted above:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { Your CSS for tablet landscape goes here }
Best regards,
RikardApril 23, 2021 at 9:54 am #1296252Hi Rikard
This part of the code is not the problem, this I know.
But I do not know how to address the background images of all the sections o the page https://yourchoice.ch/vereinswebsite.
Thanks very much.
Best regards
MikeApril 25, 2021 at 7:57 am #1296576Hi Mike,
Thanks for the update. I’m unsure that I understand your intentions, you want to target all the section on the page you linked to, only on tablet? If so, then what exactly do you want to alter?
Best regards,
Rikard- This reply was modified 3 years, 7 months ago by Rikard.
April 28, 2021 at 8:48 am #1297122Hi Rikard
I want to disable/hide all background images of all sections of the page on tablet landscape format.
Best regards
MikeApril 28, 2021 at 12:53 pm #1297155see again here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
What I think you haven’t quite realized is that there isn’t one tablet – there’s a plethora of different sizes and resolutions.
This is only for ipad:/* ----------- iPad 1, 2, Mini and Air ----------- */ /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- iPad 3, 4 and Pro 9.7" ----------- */ /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 10.5" ----------- */ /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 12.9" ----------- */ /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { }
and then you have to think of : Galaxy, Nexus, Kindle etc. pp
I’ve already given you a rough idea of the selector above.
But as soon as you have sections with url and gradient this won’t work either.
.avia_mobile – if you only want to have that rule on mobile devices to work and not on small screens..responsive.avia_mobile #top .avia-section *[style*="url("]{ background-image : none !important; }
What do you do with gaps ?
April 28, 2021 at 4:53 pm #1297196Hi all
I know and realized, that there are different sizes. That what I looked for was this code here:.responsive.avia_mobile #top .avia-section *[style*="url("]{ background-image : none !important; }
Thanks very much.
This helps me.
You can close this issue.
Best regards
Mike- This reply was modified 3 years, 7 months ago by YourChoice Informatik GmbH.
April 28, 2021 at 6:29 pm #1297208Sorry
you had to think of the avia-sections too:.responsive.avia_mobile #top .avia-section *[style*="url("] , .responsive.avia_mobile #top .avia-section[style*="url("]{ background-image : none !important; }
the first asterisk indicates that only the following elements are choosen – so the avia-section itself is missing.
April 28, 2021 at 6:31 pm #1297209Sorry for what? You helped me! ;-)
Thanks very much.
Cheers
MikeApril 28, 2021 at 6:33 pm #1297210April 28, 2021 at 7:02 pm #1297216Yes, this is bad… I think, perhaps I will use another solution, without hiding background-images.
For example something like this:
https://github.com/arscan/pleaserotate.jsApril 30, 2021 at 9:01 am #1297492Hi all
The solution with the please rotate message on landscape tablets works fine for us.
You can close this issue.
Best regards
MikeMay 1, 2021 at 5:00 am #1297662 -
AuthorPosts
- The topic ‘Disable Background images only for tablets’ is closed to new replies.