Tagged: , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 21, 2018 at 10:57 pm #930926
    Niico93

    Hey,

    i used an background image for the first section of my “Home”-Page. It looks perfect on desktop and laptop.
    You can see it here: http://www.nicolaipetrovic.com

    But it looks terrible on mobile devices no matter what setting i use. I guess it is a problem of the image size, but i don’t know the exact pixels to make it look good.

    Could you please have a look at it and help me to get it on all devices in a good shape? Credentials in private section.

    Best regards,
    Nico

    March 22, 2018 at 4:55 am #931017
    Mike

    Hey Niico93,
    I looks as though you have the background set to contain, which forces the image to show it’s full width and distort to match the height of the section. Setting to cover would match the height but not show the full width.
    Might I suggest that for mobile devices you replace the image with a solid color, because with all of the elements you have on the page, at mobile I couldn’t make out what the image was, it just looked brown to me.
    Although at desktop there is enough room around the elements to see the image.
    Otherwise my suggestion would be to set the background to cover and center the image on the barrel for mobile. We can help with this if you wish.

    Best regards,
    Mike

    March 22, 2018 at 10:57 am #931130
    Niico93

    Hey, thanks for your reply.

    So if you set the background to cover and center the image on the barrel for mobile it wouldn’t influence like it shows up on desktop right now?

    Then i would appreciate your help to get it like that

    March 22, 2018 at 4:30 pm #931424
    Nikko

    Hi,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:479px) {
  #top.home #av_section_1 .av-parallax {
    transform: none !important;
  }

  #top.home #av_section_1 .av-parallax-inner {
    height: 100vh;
    background-size: cover !important;
  }
}

    Changing the image for mobile using a portrait oriented image should make it look better. Hope it helps :)

    Best regards,
    Nikko

    March 22, 2018 at 4:45 pm #931437
    Niico93

    perfect! thanks!

    March 22, 2018 at 4:59 pm #931448
    Nikko

    Hi,

    Glad that we could help! Thanks for using Enfold and have a great day :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Background Image on mobile devices’ is closed to new replies.