Carousel Auto-Layout Customizing Text Container in Mobile

Site URL: https://plum-trout-c8tl.squarespace.com/

Heyo,

I am using Auto-Layout to display some work. But the Text is blocking the image on Mobile.

I am trying to move the text container to the bottom of the picture. Currently the text is in the middle and blocking the view.  I have already "removed" the arrows on the bottom by making them transparent. Now I want the text to be where the arrows have been.

Site URL: https://plum-trout-c8tl.squarespace.com/

Currently:

How I would like to have it (example):

Would be very happy for any kind of help!

Thanks in advance!

Hi.

What is access password?

Hey @tuanphan

password is: j6&1!eA

On 8/21/2022 at 2:58 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62f7dd0ee17e362660c2ed76"] .slide-content {
    margin-bottom: 0 !important;
}
}

 

Works, thanks!

Now I need an overlay over the image and behind the text in the Auto-Layout for every slide. It should be a gradient. Like down below:

Currently:

How I need it to be:

do you have a solution for this?

Would be very happy if you could help me again! 

On 8/22/2022 at 2:49 PM, crstph said:

Works, thanks!

 

Now I need an overlay over the image and behind the text in the Auto-Layout for every slide. It should be a gradient. Like down below:

 

Currently:

 

How I need it to be:

do you have a solution for this?

Would be very happy if you could help me again! 

 

For mobile or all devices? If all, use this code

.slide-media-container:after {
    content: "";
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

If mobile, use this

@media screen and (max-width:767px) {
.slide-media-container:after {
    content: "";
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}

If you need to adjust gradient color, position...you can see some example here

https://www.w3schools.com/css/css3_gradients.asp

Thanks, works!