DIfferent banners on desktop and mobile - by Bas Kling

This topic has 7 replies, 2 voices, and was last updated 2 years, 7 months ago ago by Bas Kling

  • Avatar: Bas_Kling
    Bas Kling
    Participant
    September 6, 2021 at 20:59

    Hi,

    We’re struggling to get 2 different banners on our home page: horizontally oriented (stretched from left to right) on desktop and vertically oriented (full screen) on mobile.

    By using Xstore’s slider, both seem to work fine, but as soon as we check (out) the visibility checkbox in column settings-> responsive tab on the row for desktop to make it disappear on mobile, and vise versa, the space reserved for that content seems to remain, due to ‘full height’ option in row settings. We don’t know of any other way to stretch the banner picture to full height on mobile. Can you please assist?

    Logging in to the website’s test page should make the situation clear. URL in private

    EDIT 1: all we need is a means to display a left-to-right stretched image on desktop, perhaps with some text over it, and a full screen (left-to-right & top-to-bottom) image on mobile. Not sure if the slider is the best way to achieve it.

    EDIT 2: we’ve tried a different option – (responsive) image gallery at the bottom of the page, but we can’t get rid of the margins and paddings

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    September 8, 2021 at 18:32

    Hello,

    Link to page that you provided displays 404. Provide us with the correct link, please.

    Regards

    Avatar: Bas_Kling
    Bas Kling
    Participant
    September 8, 2021 at 18:46

    Link is set to Private, not to mess up google analytics (copy of home page would f*ck up our stats). Please log in using your credentials als admin to open link.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    September 9, 2021 at 17:47

    Hello,

    I see. Ok but would you be so kind to send us an admin pass again because the previous one does not work for me, unfortunately.

    Regards

    Avatar: Bas_Kling
    Bas Kling
    Participant
    September 9, 2021 at 20:06

    In private

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    September 10, 2021 at 13:33

    Hello,

    Add the custom classes for the row to hide it for the mobile https://prnt.sc/1rpk7zj and these classes to hide for the desktop https://prnt.sc/1rpkc7x

    Check that page now.

    Regards

    Avatar: Bas_Kling
    Bas Kling
    Participant
    September 10, 2021 at 16:44

    Works like a charm. I think it’s because of the “full height” parameter in the first row, that messed things up. You can hide it in the WP bakery provided settings, but the space remains.
    Your work around is perfect. Thanks!

  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘DIfferent banners on desktop and mobile’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.