Issues with Fullscreen Slider on Landing Page

[dennisbern]

Hey,

https://biografie.art/front

I tried to create a fullscreen slider as a landing page, but I encountered several issues:

1. The fullscreen slider images don’t adapt to the browser width when I resize the window. How can I make them responsive?

2. I can’t completely hide the site title and menu bar. I used the following CSS code, which works for the footer but not for the navigation and title:

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

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

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

Is there something I’m missing?

3. The images appear pixelated. The resolution seems fine, but maybe I’m overlooking something. Is there a way to improve the image quality?

Thanks in advance for your help, LayTheme forum! You’re a great support.

[arminunruh]

1.:
The fullscreen slider images don’t adapt to the browser width when I resize the window. How can I make them responsive?

you are using row background. a webgl row background.
row background images or row background webgl slideshows. they will always be sized in a way where they would create no gaps around them. so they will get cut off.

hmm with just using a custom row background image we would have a chance of using custom css to size it differently.
but with webgl slideshows, the sizing logic is in the js and theres no workaround

if you would just use plain images inside the row, not a row background image, that would work

or a fading autoplay carousel that shows the different texts

please go to customize -> menu bar -> click hide
or maybe its in menu style -> menu bar

cause now you have this white bar at the top

2.:
I can’t completely hide the site title and menu bar. I used the following CSS code, which works for the footer but not for the navigation and title:

you also need to hide mobile title and mobile navbar, mobile icons:

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

and set mobile body padding to 0. that padding is there so the mobile menu bar doesnt overlap any content:

body{
padding-top: 0!important;
}

on desktop, site title and nav seem to be hidden

[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).