Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #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
    Mike

    #1294814

    maybe 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 use

    f.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 ago by Guenni007.
    #1295165

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1295294

    Hi
    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

    #1295324

    So, 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.

    #1295332

    Hi again
    The page is published already under https://yourchoice.ch/vereinswebsite/
    Thanks very much.
    Best regards
    Mike

    #1295353

    Aber 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?

    #1295758

    Hallo
    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.

    #1296225

    Hi,

    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,
    Rikard

    #1296252

    Hi 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
    Mike

    #1296576

    Hi 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 ago by Rikard.
    #1297122

    Hi Rikard
    I want to disable/hide all background images of all sections of the page on tablet landscape format.
    Best regards
    Mike

    #1297155

    see 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 ?

    #1297196

    Hi 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

    #1297208

    Sorry
    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.

    #1297209

    Sorry for what? You helped me! ;-)
    Thanks very much.
    Cheers
    Mike

    #1297210

    and you can now see on your site that the av_section_6 is touched by this – but then you will have a white space!

    #1297216

    Yes, 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.js

    #1297492

    Hi all
    The solution with the please rotate message on landscape tablets works fine for us.
    You can close this issue.
    Best regards
    Mike

    #1297662

    Hi Mike,

    Great, I’m glad that you found a solution which works. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Disable Background images only for tablets’ is closed to new replies.