Home Forums WoodMart – Premium Template Promo Banner High Mobile

This topic contains 17 replies, has 2 voices, and was last updated by Aizaz Imtiaz Awan Aizaz Imtiaz Awan 1 week, 1 day ago.

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #233962
    jamiko
    jamiko
    Customer

    Good day. I redesigned the demo / black-friday demo page. Instead of the Revolution Slider, I used the Banner Carousel. However, it doesn’t look good on the smartphone because it shows the full height and therefore only shows a section of the banner image. How can I set the banner height for smartphones to 300px with CSS? The banner is
    467px high, but for mobile it should only be 300px high!
    Demo:
    https://jamb-xxl.ch/home-black-friday/

    Please help:-)

    Private Content Hidden
    #233968

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for the Mobile area under Theme Settings >> Custom CSS.

    .promo-banner .banner-image {
    	height: 300px !important;
    }

    Regard’s.
    Xtemos Studios.

    #233971
    jamiko
    jamiko
    Customer

    It doesn’t work. I also cleared the cache. The banner remains the same height as in desktop mode.

    #233973
    jamiko
    jamiko
    Customer

    Can you see it? Is still all the way up

    Attachments:
    You must be logged in to view attached files.
    #233981
    jamiko
    jamiko
    Customer

    It should be so:

    • This reply was modified 1 week, 3 days ago by jamiko jamiko.
    Attachments:
    You must be logged in to view attached files.
    #233984

    Hello,

    I saw the screenshot you attached.

    Please try replacing the previous CSS with the following in the Custom CSS for the Mobile area under Theme Settings >> Custom CSS.

    .promo-banner .banner-image.wd-bg-position-center {
    	height: 300px !important;
    }

    If you are still unable then provide admin panel login details of the website to check it myself and help you out accordingly.

    Regard’s.
    Xtemos Studios.

    #233992
    jamiko
    jamiko
    Customer

    It still does not work:-)

    Private Content Hidden
    #233996

    Hello,

    I have logged into your website and the CSS I provided is working for mobile. The issue was due to some CSS code syntax error that you have added in the Global Custom CSS area that’s why the mobile Custom CSS wasn’t working. I have checked by removing and working.

    Screenshot for Clarification: https://ibb.co/NC0QbYR

    The CSS casing issue is as follows:

    ::-webkit-scrollbar {
    width: 0px; /* remove scrollbar space /
    background: transparent; / optional: just make scrollbar invisible /
    }
    / optional: show position indicator in red */
    ::-webkit-scrollbar-thumb {
    background: #FF0000;
    }

    Best Regards.

    #234147
    jamiko
    jamiko
    Customer

    Oh you are the best! Many Thanks. Now all banner backgrounds are nice on the smartphone and not so extremely high 🙂

    As always, have fun with your theme 🙂

    Thanks.
    Kobler Jean-Michel

    #234161
    jamiko
    jamiko
    Customer

    But now I have another problem. I put another banner in the carousel. The second banner is already visible. How come? Please watch the video. A banner looks fine, but as soon as there are 2 there is this error:
    https://www.awesomescreenshot.com/video/1394587?key=5ce29566b549365e735965540a63c001

    #234363

    Hello,

    You are Most Welcome.

    I watched the video you attached. Please try recreating the promo banner and then clear the cache and check back.

    If the problem continues then deactivate all the third-party plugins and tell me to check it myself and help you out accordingly.

    Best Regards.

    #234380
    jamiko
    jamiko
    Customer

    Good day. I have already tried everything, deactivated all plugins and also cleared the cache and the banner was redone. As soon as there are 2 banners, this error occurs. I also tested it on another system and there is exactly the same problem 🙁

    • This reply was modified 1 week, 1 day ago by jamiko jamiko.
    #234387
    jamiko
    jamiko
    Customer

    It seems to be due to the margin left 300px. If I take out margin 300px, then the banner is displayed correctly, but then it is in the wrong place, on the far left and that is also not good. Can you solve that?

    Is the Black Friday demo also available for Elementor? I would have solved it there long ago 🙂 However, I would have to redo all the pages and I’m still a little lazy at the moment

    • This reply was modified 1 week, 1 day ago by jamiko jamiko.
    #234426

    Hello,

    As the promo banners work fine without the margin-left value that you added which makes it clear it’s not the theme issue. The issue is caused by the margin you added.

    And if you want to use Elementor as a page builder then You need to recreate all the pages again if you want to Go to Elementor.

    Regard’s.
    Xtemos Studios.

    #234427
    jamiko
    jamiko
    Customer

    No. The scope is given in the Blackfriday demo, I have not adjusted anything. Margin 300px they set in the demo not me. I haven’t changed anything, just created a banner.

    #234471

    Hello,

    In the demo version, the slider is used and the settings were made accordingly.

    As you change the slider to the promo banners then you need to remove the margin value as well which is causing the issue for the display of the promo banner. As it works without the margin correctly which clarifies that is not an issue of the theme.

    Regard’s.
    Xtemos Studios.

    #234475
    jamiko
    jamiko
    Customer

    Ok then maybe you can tell me how I can set the Revolution Slider Height for Mobile to 300px? That was the reason why I no longer wanted the slider. If I set the height to 300px in Revolution Slider on Mobile, nothing happens. It always remains 465px high and is therefore much too high for my pictures.

    You see, nothing happens when I set the height for Mobile:
    Example

    #234630

    Hello,

    You can set the height of the slider for devices according to your needs by editing the slide.

    Screenshot for Clarification: https://ibb.co/ZRDq0S8

    Regard’s.
    Xtemos Studios.

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.