Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #741454

    Hi,
    I use a background image on my customers website. However, on iPad (tested 3 and 4) that background looks awfully zoomed in. Any way, maybe css code, to fix this or, as an alternative, remove this background on tablets and mobile devices?
    Thanks a lot.

    #743194

    Hey garnschuh,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:980px) {
      #top .av-flex-cells > .av_one_half {
        width: 100% !important;
        display: block;
      }
    }

    This should make it 1 column instead of 2 and stacking on top of each other on ipad portrait. Let us know if this helps.

    Best regards,
    Nikko

    #743897

    HI Nikko,
    thanks for getting back. Unfortunately, there is no change visible, even after clearing cache.
    Any possibility to replace the background picture with just a color on tablets? Is it possible to code something like this specifically for tablets at all?

    Thanks,

    garnschuh

    #745627

    Hi,

    Yes it’s possible to change that with css and target it specifically in tablets. Is this the image you want to replace to a color? see private content.

    Best regards,
    Nikko

    #746043

    HI Nikko,

    that’s actually not the picture. I am talking about the site background. It’s a tree trunk. I kinda fixed the original problem by putting the picture on repeat.However, it is s big picture and I’d rather have it not loaded on phones and tablets, or at least on phones.
    So apparently it is possible to target these devices?
    How do I replace the picture with a color – meaning how do I get a simple, fast loading background?

    thanks

    #746193

    Hi,

    Just to confirm if I got it right (the image you are referring to is the one on the Private Content, the background image of the site). If yes, you can add this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
      html.html_boxed {
        background: white !important;
      }
    }

    this part of the code let’s you target the mobile devices:

    @media only screen and (max-width:767px) {
    
    }

    the codes inside of it forces the background to use the color instead of fetching the image. Hope this helps :)

    Cheers!
    Nikko

    #747698

    Hi Nikko,

    thanks for the code. Just by looking at it I cannot tell if it’s working. There is no difference. What I hope is that the background picture is not loading on phones when I use your code. So I will put it in.

    Thanks

    garnschuh

    #749367

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 1024px) {
    .responsive .boxed#top, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header {
        max-width: 100% !important;
    }}
    

    Best regards,
    Yigit

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.