Issues with Fullscreen Slider on Landing Page

[arminunruh]

pixelated images:

looking at what images are loaded to be used inside the webgl slideshow, i see the biggest image size available is already loaded for me on my bigger screen.
try to export your images to an even bigger size

the images appear to have a width of only 1684px which may not be enough

but the webgl may also display the images not that well mmh
can u first try to export your images to have a width of 4000px?
then use those.
lay theme will load smaller versions of the images if needed, based on what browser size u use when looking at the website

[arminunruh]

also please note with texts it can be better to have them as texts instead of as an image, cause of google

[dennisbern]

@arminunruh So I made a carousel with my slider. And with the CSS code you gave me, its a perfect result, what I want for my site:

https://biografie.art/front_var

Thanks a lot.

About the pixelated text: It would be a perfect solution for me if I could write the slides directly in the carousel addon. But: I need different background colours for each text. I think this is not possible or is it?

[dennisbern]

@arminunruh : Sorry, I just realised I still have problems with the CSS code. I think my code is too complicated.

https://biografie.art/front_var/

1. With the code below I do not have a navbar or menu on mobile/responsive pages at all when I go to my main page (it should be only on the landing page). It works fine on the desktop version.

2. When I open the page, I have a white bar at the bottom. Also another problem in the mobile/responsive version of the site the footer is still activated.

Mobile:

Desktop:

Here ist my Code:

/* Hide Footer on LANDING*/
.slug-front_var .footer{
display: none!important;
}

.slug-front_var .head{
display: none!important;
}

/* Hide Navbar on LANDING*/

.slug-front .laynav{
display: none!important;
}

/* Hide Navbar on LANDING*/
.slug-front .sitetitle{
display: none!important;
}

.mobile-title,
.navbar,
.lay-mobile-icons-wrap{
display: none!important;
}

body{
padding-top: 0!important;
}

/* Hide Footer on LANDING*/
.slug-front .footer{
display: none!important;
}

.slug-front .head{
display: none!important;
}

/* Hide Navbar on LANDING_VARIANTE*/

.slug-front_var .laynav{
display: none!important;
}

/* Hide Navbar on LANDING*/
.slug-front_var .sitetitle{
display: none!important;
}

[dennisbern]

The problem with the footer is solved. I am now manually adding the footer to each page.

But still the menu on mobile is missing after clicking on the landing page (on the landing page it is correct that the mobile is hidden).

[arminunruh]

it should be

.slug-front .mobile-title,
.slug-front  .navbar,
.slug-front  .lay-mobile-icons-wrap{
display: none!important;
}

This way, the mobile title, mobile navigation bar, and mobile menu icon are hidden only on the front page. I mean the page that has the slug front.

You look closely at the CSS that I gave you for hiding the mobile title, mobile navigation, and mobile bar. Then you see, it just hides it for all pages on a website.

Now, if you look at the code that you gave me when you first created this post, you used a slug class to only target one page.

Maybe you forgot that you can use this way to target CSS to only get applied to one page.

Please check the slug of your page if this is correct. I don't know if slug-front is the right CSS class.

[arminunruh]

No, there are no options to give text a colored background in a carousel.

[arminunruh]

Can you Google how to use Chrome Inspector? Because with the inspector you can easily find out the HTML classes or IDs to use to write your CSS. Because, for example, you are staying on one page, the footer is showing. You could find out the CSS class of that footer. It might be different for desktop or mobile. And then write CSS to display:none that container.

[arminunruh]

If you want your carousel to fill out the whole browser height, then you have to create a carousel with a fixed height and set it to 100vh.

In the carousel modal where you edit or create your carousel, there is a radio input that you can select for fixed height.

Also make sure (of course) in your gridder of the page frame top is set to zero, frame bottom is set to zero and the carousel is sized to the whole width.

[dennisbern]

@arminunruh I cleaned up the code. And used yours. Now it works:

/* Hide Footer on LANDING*/
.slug-front_var .footer{
display: none!important;
}

/* Hide Navbar on LANDING*/
.slug-front_var .sitetitle{
display: none!important;
}

.slug-front_var .mobile-title,
.slug-front_var .navbar,
.slug-front_var .lay-mobile-icons-wrap{
display: none!important;
}

/* Hide Menu on LANDING*/
.slug-front_var .laynav{
display: none!important;
}

[arminunruh]

ok im happy it works for u