Solved

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

maanst
Tourist
14 0 2

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? 

maanst_0-1705756157108.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
989 258 204

This is an accepted solution.

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;
    }    
}
Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
989 258 204

Hey @maanst

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

Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here
maanst
Tourist
14 0 2

www.teia.no
pw: XXXXX

ThePrimeWeb
Shopify Partner
989 258 204

This is an accepted solution.

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;
    }    
}
Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here
maanst
Tourist
14 0 2

Awesome, that helped 🙂 

 

Thanks alot!

techlyser_web
Shopify Partner
1004 188 189

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;
     }
  }

techlyser_web_0-1705759802427.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
maanst
Tourist
14 0 2

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

maanst_0-1705763482339.png

 

techlyser_web
Shopify Partner
1004 188 189

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;
 }

techlyser_web_0-1705765788214.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
maanst
Tourist
14 0 2

maanst_0-1705781647710.png

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.