easy slider caption background fullwidth - Support | Kriesi.at

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

Author

Posts
April 22, 2025 at 8:00 am #1481791

dondela
Participant

Dear support,
i want to achieve a layout like in my dropbox screenshot. I want the white “easy slider caption background” in fullwidth. Is this possible?
Thanks of any help!

April 23, 2025 at 6:16 am #1481903
Ismael
Moderator
Hey dondela,

Thank you for the inquiry.

You can adjust the maximum width of the slideshow caption container with this css code:
```
.av_slideshow_full .container.caption_container {
    max-width: 100vw;
}
```
Best regards,
Ismael
April 23, 2025 at 8:16 am #1481928

dondela
Participant

Hey Ismael,
thanks for your help.
I applied this code.
Would it be also possible to adjust just the white background to 100%. (And keep the headings narrower)

April 23, 2025 at 8:28 am #1481933

dondela
Participant

Or is there any better way to achieve this layout? It doesn’t have to be to be the slideshow-element

April 24, 2025 at 8:11 am #1482068
Ismael
Moderator
Hi,

Would it be also possible to adjust just the white background to 100%. (And keep the headings narrower)

Yes, you can apply padding on both sides of the slideshow caption container:
```
.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
    padding: 20px 20vw;
}
```
View post on imgur.com

Best regards,
Ismael
April 24, 2025 at 9:27 am #1482099

dondela
Participant

Hi and thanks again for your help!
This doesn´t work for me – i need the headlines aligned to the content below.

I changed the slider element to a color-element with a fullscreen image on top.
For the headline i created a column (.headlineOverImage) with a negative margin and a white background-color.
My question now: Would it be also possible to adjust just the white background to 100%. (And keep the headings narrower ?)

April 25, 2025 at 6:24 am #1482563

Ismael
Moderator

Hi,

Have you tried adjusting the padding value? You can also use calc function to correctly adjust the padding based on the screen width.

— https://www.w3schools.com/cssref/func_calc.php

Best regards,
Ismael

April 25, 2025 at 6:50 am #1482588
dondela
Participant
Hello Ismael,
yes i applied this code
```
.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
    padding: 20px 15vw !important;
}
```
I don´t understand how i could use the calc function to adjust the position of the headline right?
April 25, 2025 at 7:17 am #1482613
Ismael
Moderator
Hi,

You can try this css code:
```
.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
    padding-left: calc((100vw - 1200px) / 2 + 50px) !important;
    padding-right: calc((100vw - 1200px) / 2 + 50px) !important;
}
```
View post on imgur.com

Best regards,
Ismael
April 25, 2025 at 8:34 am #1482656

dondela
Participant

Hi Ismael,
thank you – this looks now better on desktop screen. How could i adjust this for smaller screens?

April 25, 2025 at 5:35 pm #1482957
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container.caption_container {
        width: 100%;
        max-width: 100%;
    }
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 25, 2025 at 6:47 pm #1482973

dondela
Participant

HI Mike,
thanks for your help. I applied the code but nothing changed. Maybe i have to put in some padding?

April 25, 2025 at 11:16 pm #1483131
Mike
Moderator
Hi,
When I first checked, the white area was not fullwidth:

but now it is:

Perhaps you want this:

if so try adding this css:
```
@media only screen and (max-width: 767px) {
    #top #wrap_all .avia-caption-content p {
    width: 80%;
    margin: auto;
}
    #top #wrap_all .avia-slideshow .avia-caption-title {
        width: 80%;
        margin: auto;
}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 25, 2025 at 11:19 pm #1483132

Mike
Moderator

Hi,
Please check from the forum and not an email notification.

Best regards,
Mike

April 26, 2025 at 2:50 am #1483202
dondela
Participant
Hi Mike,
awesome, i applied this code and now it works as expected. Thank you so much!!
```
/* Mobile view header content */
@media only screen and (max-width: 767px) {

    .responsive #top #wrap_all .container.caption_container {
        width: 100%;
        max-width: 100%;
    }

    #top #wrap_all .avia-caption-content p,
    #top #wrap_all .avia-slideshow .avia-caption-title {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 10px;
   
    }
}
```
April 26, 2025 at 3:06 am #1483203

dondela
Participant

Hi Mike,
there is another problem which i can´t figure out:
Is it possible to increase the image size in that cell like in the screenshot?

April 26, 2025 at 10:13 pm #1483243
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
.responsive #top.home #wrap_all .flex_cell.av_one_third {
    padding: 0 !important;
}
.responsive #top.home #wrap_all .flex_cell.av_one_third .av_textblock_section {
	padding: 0 25px;
}
.responsive #top.home #wrap_all .flex_cell.av_one_third #rotesQuadrat {
	margin-left: 25px;
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 27, 2025 at 3:51 am #1483248

dondela
Participant

Hi Mike,
awesome thank you – this is it :-) Great support!

I have another problem with the cookie modal window button-position. Would it be possible to place all buttons above the window-content instead below, so that the user don’t need to scroll down to the buttons? A lot of users don’t figure out how to scroll down to accept or decline the message. Should i maybe open another thread for that?

April 27, 2025 at 4:00 pm #1483253

Mike
Moderator

Hi,
I’m not sure if that is possible, but please do open a new thread and enable the cookie badge so I can view it, since the only way to see your site is to first login I’m not asked to accept the cookies today. I thought yesterday I could see it, but not today.
I also can’t read your theme settings language, so I’m having trouble finding the correct settings, perhaps a new login for us that we can change the language to English would help, or change it on the login you already posted, if you don’t mind.

Best regards,
Mike

April 27, 2025 at 4:50 pm #1483255

dondela
Participant

This reply has been marked as private.

April 27, 2025 at 6:39 pm #1483257

Mike
Moderator

Hi,
Thanks I answered your new thread, I will close this thread now.

Best regards,
Mike
Author

Posts

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

The topic ‘easy slider caption background fullwidth’ is closed to new replies.