Promo Banner High Mobile

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:-)

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.

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

Can you see it? Is still all the way up

Attachments:

You must be logged in to view attached files.

It should be so:

Attachments:

You must be logged in to view attached files.

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.

It still does not work:-)

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.

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

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

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.

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 🙁

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

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.

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.

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.

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

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.

[Author]

Posts