Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 1, 2017 at 9:17 pm #741454
    garnschuh

    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.

    February 6, 2017 at 8:26 am #743194
    Nikko

    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

    February 7, 2017 at 1:44 pm #743897
    garnschuh

    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

    February 10, 2017 at 10:31 pm #745627
    Nikko

    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

    February 12, 2017 at 10:20 pm #746043
    garnschuh

    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

    February 13, 2017 at 8:21 am #746193
    Nikko

    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

    February 15, 2017 at 10:16 pm #747698
    garnschuh

    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

    February 20, 2017 at 2:22 pm #749367
    Yigit

    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

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