Making text and picture not overlap between 749PX and 1050px

[maanst]

Hi,

On my slideshow im struggeling to make the text and picture not overlap between 749 and 1050.

Under 749PX the picture and text is moved to be over and under, and above 1050 the text is formatted to fit next to the picture.

But between here they overlap. Anyone know a simple fix?

[ThePrimeWeb]

Hey @maanst ,

This should be doable, can you share the link to the store?

[maanst]

www.teia.no
pw: XXXXX

[ThePrimeWeb]

Try this @maanst

@media only screen and (min-width: 768px) and (max-width: 1050px) {
    .banner--mobile-bottom .banner__media, .banner--stacked:not(.banner--mobile-bottom) .banner__media {
        position: relative;
    }
    
    .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
        height: 65rem;
    }    
}

[maanst]

Awesome, that helped

Thanks alot!

[niraj_patel]

Hello @maanst
@media screen and (max-width:1050px){
h2.banner__heading.inline-richtext.h0 {
font-size: 51px;
width: 100%;
max-width: 404px;
}
.slideshow__text-wrapper.banner__content{
padding:unset !important;
}
}
@media screen and (min-width:749px){
h2.banner__heading.inline-richtext.h0 {
font-size: 27px;
width: 100%;
max-width: 242px;
}
.banner–small.banner–mobile-bottom:not(.banner–adapt) .banner__media{
position:relative;
}
.slideshow__text.slideshow__text-mobile–left {
align-items: flex-start;
text-align: left;
position: absolute;
bottom: 108px;
}
}

[maanst]

I treid this one aswell and ended up with this result:

[niraj_patel]

Replace the code with this code:
.slideshow__slide {
padding: 0;
position: relative;
display: flex;
flex-direction: row-reverse !important;
visibility: visible;
}
.banner__content.banner__content–middle-left {
align-items: center !important;
justify-content: flex-end !important;
background: #ebdcfc !important;
}
.slideshow__text-wrapper.banner__content{
padding:unset !important;
}

[maanst]

The text is not at the wrong side, and the picture is fading out.

If i change justify-content to flex-start, i get the text at the correct place, but the image fades out.