Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 5, 2019 at 2:25 pm #1124747
    Chili2908

    Hi there,

    I have an issue with the background image in a color area on mobile devices. It’s cropped quite unfortunate… (first link)
    (Since mobile devices are becoming more important day by day is it please possible to get different image placements/settings for mobile devices?)

    I also tried the solution which was offered here (creating a second color section for mobile only) but unfortunately, after applying this the scroll down arrow doesn’t work anymore. (second link) The newly created section which is only visible on mobile might prohibit the scrolling…
    I have linked the pages in “private content”.

    Any solution would be appreciated. :)

    All the best!

    August 5, 2019 at 3:59 pm #1124777
    Chili2908

    Hi,

    I already found a solution for the issue with the scroll down arrow by simply changing the order of the elements in the backend. (Desktop version is now the 2nd av-section…)
    Nevertheless, this is kinda … grubby … and not the kind of solution I’d like to apply. :| Maybe you have another one?

    Thanks!

    August 7, 2019 at 2:13 am #1125336
    Ismael

    Hi,

    Thank you for using Enfold.

    You can apply a different background image on mobile view using css. First, define the Section ID of the color section, then use the following code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
    #section_ID .av-parallax-inner {
        background-image: url(IMAGE URL HERE) !important;
    }
}

    Replace the #section_ID selector with the actual Section ID and adjust the image URL.

    Best regards,
    Ismael

    August 12, 2019 at 4:44 pm #1126838
    Chili2908

    Thank you Ismael, that helped a lot! :)

    Is it also possible to use this method for other elements such as a masonry? I have linked a page in private content which shows you on desktop 4 references. On mobile, especially considering there’s more to come, this one would be too much to display. Therefore we’re using a different setting for the same masonry. Maybe this could be solved by defining a section ID, too? If so and to avoid duplicate content, what code would we have to apply?

    Thank you in advance!

    August 17, 2019 at 11:36 pm #1128516
    Mike

    Hi,
    Sorry for the late reply, yes you can use the media queries to show different elements for different screen sizes, while hiding others. I examined your page and found that you are doing this now with the “screen options” in the elements for two sections #av-masonry-1 & #av-masonry-2
    Please see the screenshot in Private Content area.
    So I will use this as an example so you could use the following css in the Quick CSS instead of the screen options:

    @media only screen and (min-width: 768px) {
    #av-masonry-1 {
        display: block !important;
    }
    #av-masonry-2 {
    display: none !important;
    }
}
@media only screen and (max-width: 767px) {
    #av-masonry-2 {
        display: block !important;
    }
    #av-masonry-1 {
    display: none !important;
    }
}

    I hope this example helps to make this tactic clearer, please let us know if we can be of more help.

    Best regards,
    Mike

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