Position of slide description

Hey digitalprint2222,

I believe it would be better if you did not added caption to your slider and added an text block element with a custom CSS class right below it instead and then positioned it using CSS as needed

Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Best regards,
Yigit

Hi,

Please add following code to Quick CSS

#sliderhome * {
    overflow: visible;
}
#sliderhome .avia-caption {
    left: -100px;
}

and adjust the values as needed

Best regards,
Yigit

Hi,

That code was not posted here before so i am not sure what exactly you told me before. Please try adding following code to Quick CSS as well

.html_boxed #main {
    overflow: visible;
}

Best regards,
Yigit

Hi,

Thank you for the info. Please try the following css code.

@media only screen and (min-width: 1024px) {
#sliderhome .caption_framed .slideshow_caption .avia-caption-content p, #sliderhome .caption_framed .slideshow_caption .avia-caption-title, #sliderhome .avia-caption .avia-caption-content p, #sliderhome .avia-caption .avia-caption-title {
    background-color: transparent;
    width: 50%;
    margin-left: 50%;
}

#sliderhome .avia-caption {
    left: -450px;
}

#sliderhome .avia-inner-caption {
    background: rgba(0,0,0,.5);
    width: 50%;
}
}

Best regards,
Ismael

Hi,

The code is working when I test it in the browser inspector. However, you might need to add a few adjustments to the code for mobile view or for smaller screens. Please post the login details here so that we can test it further.

Best regards,
Ismael

Hi,

We modified the code in the Quick CSS field:

@media only screen and (min-width: 1024px) {
#sliderhome * {
    overflow: visible !important;
}

#sliderhome .caption_framed .slideshow_caption .avia-caption-content p, #sliderhome .caption_framed .slideshow_caption .avia-caption-title, #sliderhome .avia-caption .avia-caption-content p, #sliderhome .avia-caption .avia-caption-title {
    background-color: transparent;
    width: 50%;
    margin-left: 50%;
}
#sliderhome .avia-caption {
    bottom: 30%;
}

#sliderhome .avia-inner-caption {
    background: rgba(0,0,0,.5);
    width: 50%;
}
}

@media only screen and (min-width: 1600px) and (max-width: 2600px)  {
    #sliderhome .avia-caption {
    left: -450px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px)  {
    #sliderhome .avia-caption {
    left: -200px;
    }
}

I’m sorry but you cannot apply this modification in a boxed layout.

Best regards,
Ismael

Hi,

1: We can move the code from Quick CSS field to our child-themes CSS-file?

1.) Do you mean the child theme’s style.css file? Yes, you can move the css modifications there.

2: On a mobile the heading of the description is chopped off. I guess its more a question of the height of the color section. Is that correct? can you please point me in the right direction?

2.) The minimum height of the slider can be adjusted on mobile view. This will create more space for the title and captions.

// https://kriesi.at/support/topic/logo-section-overlapping-full-length-slider/#post-722773
// https://kriesi.at/support/topic/how-to-add-cta-button-into-the-slider/#post-722308

Best regards,
Ismael